安裝:
npm i sortablejs -S
完整代碼:
// dom結(jié)構(gòu)
<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",
// 拖動結(jié)束
onEnd: function (evt) {
// 獲取拖動后的排序，arr數(shù)組里的值是 data-id 的順序
let arr = sortable.toArray();
console.log({ evt, arr })
},
};
//初始化
sortable = Sortable.create(this.$refs.box, ops);
}
},
// 調(diào)用方法
this.$nextTick(function () {
this.initSortable();
});
效果圖:
sortablejs.gif
