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如何实现暗黑模式

html table的直列化格式是什么

html怎么引入图片

html的<frameset>标签有什么作用

添加背景音乐的html标签是什么

页面性能优化的方法总结

html map标签是什么?html map标签的结构及具体使用方法详解

html怎么换行?换行代码是什么?九种html文字换行方法总结

html中表格动态添加的方法

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




打赏

取消

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

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

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

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

评论

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