html5支持drag的拖放排序插件sortable.js

html5支持drag的拖放排序插件sortable.js

 <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/Sortable.min.js"></script>

 //拖放+排序
 Sortable.create(simpleList, {
     animation: 150, //動畫參數
     onSort: function(evt) {
         //  console.log(settings.rowNum);
         $("#simpleList").children(".m-items").each(function(index, el) {
             $(el).find(".z-num").text(index + 1 + ".")
         })
     }
 });

sortable.js拖放排序插件的事件api

<script>
  Sortable.create(document.getElementById('foo'), {
  animation: 150, //動畫參數
  onAdd: function (evt){ //拖拽時候添加有新的節點的時候發生該事件
   console.log('onAdd.foo:', [evt.item, evt.from]); 
  },
  onUpdate: function (evt){ //拖拽更新節點位置發生該事件
   console.log('onUpdate.foo:', [evt.item, evt.from]); 
  },
  onRemove: function (evt){ //刪除拖拽節點的時候促發該事件
   console.log('onRemove.foo:', [evt.item, evt.from]); 
  },
  onStart:function(evt){ //開始拖拽出發該函數
   console.log('onStart.foo:', [evt.item, evt.from]);
  },
  onSort:function(evt){ //發生排序發生該事件
   console.log('onSort.foo:', [evt.item, evt.from]);
  },
  onEnd: function(evt){ //拖拽完畢之后發生該事件
   console.log('onEnd.foo:', [evt.item, evt.from]); 
  }
  });
 </script> 

詳情請查看：

http://www.jb51.net/article/96446.htm