评论

收藏

[Html/CSS] HTML table鼠标拖拽排序功能

开发技术 开发技术 发布于:2021-09-14 21:12 | 阅读数:570 | 评论:0

效果图:
DSC0000.png

DSC0001.png

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代码之家网站的支持!

关注下面的标签,发现更多相似文章