HTML的table鼠标拖拽排序该如何实现


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来HTML的table鼠标拖拽排序该如何实现,用HTML实现table鼠标拖拽排序的注意事项有哪些,下面就是实战案例,一起来看一下。

1.引入文件

1

2

3

<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类

1

2

3

4

<tbody class="sortable">

   <tr></tr>

   <tr></tr> 

</tbody>

3.开启并配置

1

2

3

4

5

6

7

8

9

10

11

12

13

$(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图片的img标签怎样使用

HTML里的name与id和class到底有什么不同

如何使用HTML+CSS做出鼠标划过就可以显示二级菜单栏

以上就是HTML的table鼠标拖拽排序该如何实现的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

关于html主体的一些问题探讨

html的基础知识.关于css样式表和样式属性的详细介绍

htm和html是什么

html文件中include文件内容应该如何使用

html中如何将字体加粗

浅谈html空链接的作用

html元素的显示优先级是什么

单选框的type属性值为什么

html中相对路径和绝对路径的区别

html的meta标签用法总结

更多相关阅读请进入《table》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...