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背景的属性名是

html如何制作滚动歌词

html css是什么

html行内标签可以设置宽高吗

html怎么让超链接没有下划线

15 个优秀的响应式 web 设计 html 和 css 框架

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




打赏

取消

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

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

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

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

评论

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