• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > HTML table鼠标拖拽排序功能

HTML table鼠标拖拽排序功能

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含html,拖拽排序等相关知识,佚名 希望在学习及工作中可以帮助到您

效果图:

1.引入文件

<script src="js/jquery-1.10.1.min.js"></script>  
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">  
<script src="js/jquery-ui.min.js"></script>  

2.给元素附上sortable类

<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>  

3.开启并配置

$(function() {  
    $(".sortable").sortable({  
        cursor: "move",  
        items: "tr", //只是tr可以拖动  
        opacity: 0.6, //拖动时,透明度为0.6  
        revert: true, //释放时,增加动画  
        update: function(event, ui) { //更新排序之后  
            var categoryids = $(this).sortable("toArray");  
            var $this = $(this);  
        }  
    });  
    $(".sortable").disableSelection();  
});  

以上所述是小编给大家介绍的HTML table鼠标拖拽排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对微课江湖网站的支持!

您可能想查找下面的文章:

  • HTML表单提交的几种方式_动力节点Java学院整理
  • HTML表单_动力节点Java学院整理
  • HTML大于号、小于号、空格、引号等常用的转义代码写法一览表
  • HTML中实现鼠标经停时整行(tr)变色
  • html格式化json的实例代码
  • html在消息按钮上增加数量角标的实现代码
  • html页面跳转传递参数问题
  • html、css和js注释规范用法小结
  • Html 实现动态显示颜色块的报表效果(实例代码)
  • html是什么文件 html文件如何打开

相关文章

  • 2017-08-05总结XHTML代码常见的应用问题
  • 2017-08-05html表单上传文件的“浏览”按钮修改方法
  • 2017-08-05html area图片热点的使用介绍附相关属性一览表
  • 2017-08-05html滚动条 textarea属性设置
  • 2017-08-05关于shortcut icon和icon代码的区别介绍
  • 2017-08-05当td为空时怎样显示其边框
  • 2017-08-05html格式化json的实例代码
  • 2017-08-05HTML中相似的标签和属性的区别详解
  • 2017-08-05iframe的src设置为about:blank之后细节探讨
  • 2017-08-05HTML页面3秒后自动跳转的三种常见方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML meta的大作用
    • 浅谈HTML的doctype和编码
    • html中使用js来获取本地系统时间
    • HTML基础总结推荐(标题)
    • 在html文件里include文件内容的方法小结
    • html的footer置于页面最底部的简单实现方法
    • 一篇文章教你学会HTML
    • img图片标签赋予alt属性是否需要
    • Content-type的说明即HTTP请求头的类型整理
    • 无法定义IE6字体:13px大小无效,IE6自动显示更大的字体的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有