一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:26:56 编辑:袖梨 来源:一聚教程网

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

热门栏目