jquery mobile开发手机webapp页面（三）拖动排序插件Sortable

最新推荐文章于 2021-03-03 14:52:08 发布

轻松的山岭

最新推荐文章于 2021-03-03 14:52:08 发布

阅读量7.4k

点赞数 3

分类专栏： web前端 jquery 文章标签： jquery 插件手机 jquery mobile web app

本文链接：https://blog.csdn.net/z21102/article/details/51744125

版权

本文介绍如何使用Sortable.js插件在手机web app中实现拖动排序功能。该插件轻量级且支持移动端，可以方便地对列表进行排序、序列化和恢复。文中提供项目应用代码示例，并提示了与uploadifive插件配合使用的注意事项及删除功能的实现。

摘要由CSDN通过智能技术生成

这一篇我来分享一下拖动排序插件Sortable.js这是一款小型的支持手机端排序功能的插件。非常好用。

首先要引入文件

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

接下来我们需要一个列表例如这样

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

如果你需要获得排序后的数据可以用下面的方法

new Sortable(el, {
    group: "localStorage-example",
    store: {
        /**
         * Get the order of elements. Called once during initialization.
         * @param   {Sortable}