三叶草 发表于 2021-9-14 21:12:34

HTML table鼠标拖拽排序功能

效果图:


1.引入文件
<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类
<tbody class="sortable">
   <tr></tr>
   <tr></tr>   
</tbody>3.开启并配置
$(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();
});以上所述是小编给大家介绍的HTML table鼠标拖拽排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对CodeAE代码之家网站的支持!

https://www.uoften.com/webdesign/xhtml/20180414/68916.html
页: [1]
查看完整版本: HTML table鼠标拖拽排序功能