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中rel属性的分析

html noscript标签怎么用

html如何设置字体颜色

html文件中文乱码怎么办

怎么解决html <a>标签中文乱码问题

html u标签怎么用

html怎样使用style添加属性

form标签的action属性怎么用?form标签action属性的用法介绍(附实例)

html hr是什么意思

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




打赏

取消

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

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

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

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

评论

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