HTML的table鼠标拖拽排序该如何实现
php中世界最好的语言
发布： 2018-01-18 09:58:38
原创
3540人浏览过
这次给大家带来html的table鼠标拖拽排序该如何实现，用html实现table鼠标拖拽排序的注意事项有哪些，下面就是实战案例，一起来看一下。
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();
});登录后复制
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
立即学习“前端免费学习笔记（深入）”；
相关阅读：
以上就是HTML的table鼠标拖拽排序该如何实现的详细内容，更多请关注php中文网其它相关文章！
HTML速学教程(入门课程)
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
来源：php中文网
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
-
2018-06-15 15:55:18
-
2018-06-15 15:49:00
-
2018-06-15 15:46:15
-
2018-06-15 15:42:38
-
2018-06-15 15:40:34
-
2018-06-15 15:39:32
-
2018-06-15 15:37:14
-
2018-06-15 15:34:21
-
2018-06-15 15:22:51
-
2018-06-15 15:21:46
最新问题
310
收藏
