最近在找有关拖拽排序类的组件，实现在一个列表内及多个列表间的数据的拖拽排序。经比较最终选Sortable.js （https://github.com/RubaXa/Sortable） 。

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）。

sortable其中具有很多的优点：

1. 支持触屏设备和大部分浏览器
2. 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序
3. 移动列表单元时有css动画
4. 支持拖放操作和可选择的文本
5. 非常友善的滚动效果
6. 基于原生HTML5中的拖放API
7. 支持多种框架（angular、vue、react等）
8. 支持所有的css框架，像Bootstrap
9. 简单的API，方便使用
10. 不依赖jQuery

sortable通过配置参数实现拖拽拖拽排序，其中我认为最重要的几个参数是：

group: "name",  // 分组的名字，同样的name可以互相拖动到对应列表排序
sort: true,  // 默认为true，设置是否可以排序。
delay: 0, // 可以进行拖动的延迟时间
disabled: false, // 是否可以拖动排序
animation: 150,  //动画时间
handle: ".my-handle",  // 为列表中对象设置手柄，按住对象的拖动手柄才可以进行拖动
draggable: ".item",  // 列表中哪些对象可以进行拖拽
ghostClass: "sortable-ghost",  // 被拖动元素离开原来位置时原来位置的样式
dragClass: "sortable-drag",  // 拖动是被操作的对象的样式

对于拖拽事件onAdd: function (evt) {…},onUpdate: function (evt) {…}等事件，其中参数evt中有被操作元素的属性，如newIndex（数字，表示新的位置），oldIndex（数字，表示之前的位置），item（被操作的对象）等。

下面是一个在angularjs的框架中的例子，代码就不在这里列了，具体的代码和效果可以在https://jsfiddle.net/luxiaobei/f8L35wet/1/中查看。

当然，sortable是一个比较轻量的拖拽排序组件，可以实现类似功能的更强大是jquery原生的组件，下次再跟大家分享吧。(^_^)谢谢！