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怎么插入百度富文本编辑器ueditor

html的隐藏属性是什么

html5单页面手势滑屏切换如何实现

html如何设置单元格颜色

html是什么语言

html文档由哪几部分组成

html怎么取消有序列表的序号

利用gulp实现压缩的实例

html base标签怎么用?base标签的使用方法(附实例)

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




打赏

取消

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

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

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

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

评论

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