针对后台列表table拖拽比较实用的jquery拖动排序

现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

复制代码

 
 






 

 

  
序号
  
年份
  
标题
  
作者
 
 
 

  

   
1
   
2014
   
这是第1个
   
阿斯蒂芬阿斯蒂芬
  
  

   
2
   
2015
   
这是第2个
   
阿萨德发射点发岁的
  
  

   
3
   
2016
   
这是第3个
   
阿萨德发送地方
  
  

   
4
   
2017
   
这是第4个
   
的说法大赛分
  
 

复制代码
除了要引入jquery.js 和jqueryUI.js外，还需要如下一段代码：

复制代码

 $(document).ready(function(){
  var fixHelperModified = function(e, tr) {
     var $originals = tr.children();
     var $helper = tr.clone();
     $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
     });
     return $helper;
    },
    updateIndex = function(e, ui) {
     $('td.index', ui.item.parent()).each(function (i) {
      $(this).html(i + 1);
     });
    };
  $("#sort tbody").sortable({
   helper: fixHelperModified,
   stop: updateIndex
  }).disableSelection();
 });

这是我发现的比较实用的一个拖动排序，还是比较方便的。