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

效果图:

​