jquery 拖拽排序插件Sortable使用方法

Sortable是一个独立的JS插件，不需要jquery，Sortable非常轻量，压缩后只有2KB，适用现代浏览器与移动设备。使用Sortable可以轻松实现鼠标拖拽排序，让用户操作更方便，具有极强的体验性。

特点

支持触摸设备和现代浏览器

使用本地化HTML5 API拖拽

简单的API

轻量级的,压缩只有2 kb

无需jQuery

使用方法

引入核心文件Sortable

构建html，不局限于3个，可以N个

Default

   
• item 1

   
• item 2

   
• item 3

写入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('|'));
        }
    }
})