注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

超强的拖拽排序插件Sortable

UI fishcity 9280浏览

超强的拖拽排序插件Sortable

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

特点

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

使用本地化HTML5 API拖拽

简单的API

轻量级的,压缩只有2 kb

无需jQuery

使用方法

引入核心文件Sortable

<script src="Sortable.js"></script>

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

<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);

参数

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()

保存与恢复排序

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

转载请注明:jQ酷 » 超强的拖拽排序插件Sortable

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。