sortablejs拖拽排序

安装:
npm i sortablejs -S
完整代码:
// dom结构
<div ref="box" style="margin: 0 auto;display: inline-block;">
    <div class="row" data-id="a">a</div>
    <div class="row" data-id="b">b</div>
    <div class="row" data-id="c">c</div>
</div>
// js代码
import Sortable from 'sortablejs';
initSortable() {
    let sortable;
    // 拖动配置
    const ops = {
        animation: 200,
        group: "name",
        // 拖动结束
        onEnd: function (evt) {
          // 获取拖动后的排序,arr数组里的值是 data-id 的顺序
          let arr = sortable.toArray();
          console.log({ evt, arr })
        },
      };
      //初始化
      sortable = Sortable.create(this.$refs.box, ops);
    }
},
// 调用方法
this.$nextTick(function () {
    this.initSortable();
});
效果图:
sortablejs.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容