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鼠标拖拽排序功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！