背景：

作為一名前端開發人員，在工作中難免會遇到拖拽功能，分享一個github上一個不錯的拖拽js庫，能滿足我們在項目開發中的需要，支持Vue和React，下面是我在vue后臺項目中中使用SortableJS的使用詳細流程；

安裝:

npm install sortablejs

需要使用的頁面引入

import Sortable from "sortablejs";

js代碼

在頁面生命周期mounted()的時候,調用初始化拖拽實例方法:

 mounted() {this.test();//方法名可自定義},

頁面methods中:??

 // 拖拽test() {var that = this;var el = document.getElementById("items");// 常用new Sortable(el, {draggable: ".listitem",animation: 500,onEnd: function (evt) {setTimeout(() => {console.log('evt');console.log(evt);// 處理出排序之后的data數據that.arr.splice(evt.newIndex,0,that.arr.splice(evt.oldIndex, 1)[0]); //在數據中,將元素從舊位置刪除,再新增到新位置console.log(arr)}});},

里面的配置:draggable: ".listitem"? 將這個改成你需要拖動的實際元素的class,注意不與別的地方的元素重復.?

以上代碼在拖拽完成后會得到一個evt對象.里面包含了一些信息:

里面有你拖動的這個元素拖動前的索引oldIndex和拖動后的索引newIndex，于是我利用這兩個索引將數組數組進行處理，在后續進行調用接口保存順序。

 that.arr.splice(evt.newIndex, 0,that.arr.splice(evt.oldIndex, 1)[0])

以上代碼的邏輯:

先將被拖動的項從原數組中刪除,而splice方法會返回一個數組,這個數組只有一項,就是被刪除項,于是,再將被刪除項添加到他新位置上就好了.