Sortable是一个独立的JS插件，不需要jquery，Sortable非常轻量，压缩后只有2KB，适用现代浏览器与移动设备。使用Sortable可以轻松实现鼠标拖拽排序，让用户操作更方便，具有极强的体验性。
特点
支持触摸设备和现代浏览器
使用本地化HTML5 API拖拽
简单的API
轻量级的,压缩只有2 kb
无需jQuery
使用方法
引入核心文件Sortable
<script src="Sortable.js"></script>
构建html，不局限于3个，可以N个
Default
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
写入JS初始化
var el = document.getElementById('items');
new Sortable(el);
Default
new Sortable(el, {
group: "name",
store: null, // @see Store
handle: ".my-handle", // 点击目标元素约束开始
draggable: ".item", // 指定那些选项需要排序
ghostClass: "sortable-ghost",
onStart: function (/**Event*/evt) { // 拖拽
var itemEl = evt.item;
},
onEnd: function (/**Event*/evt) { // 拖拽
var itemEl = evt.item;
},
onAdd: function (/**Event*/evt){
var itemEl = evt.item;
},
onUpdate: function (/**Event*/evt){
var itemEl = evt.item; // 当前拖拽的html元素
},
onRemove: function (/**Event*/evt){
var itemEl = evt.item;
}
});
方法
toArray():String[]
把需要排序的选项序列化成字符数组
sort(order:String[])
通过数组排序元素
var order = sortable.toArray();
sortable.sort(order.reverse()); // apply
destroy()
保存与恢复排序
Default
new Sortable(el, {
group: "localStorage-example",
store: {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @retruns {Array}
*/
get: function (sortable) {
var order = localStorage.getItem(sortable.options.group);
return order ? order.split('|') : [];
},
/**
* Save the order of elements. Called every time at the drag end.
* @param {Sortable} sortable
*/
set: function (sortable) {
var order = sortable.toArray();
localStorage.setItem(sortable.options.group, order.join('|'));
}
}
})