怎么在antdesign-vue中利用sortablejs實現一個拖拽排序功能

今天就跟大家聊聊有關怎么在antdesign-vue中利用sortablejs實現一個拖拽排序功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

sortablejs介紹

首先先來認識一下這個插件: sortablejs
大家可以去細讀一下它的api文檔：

這邊我就著重介紹一下我用到的api。
1.group可以傳入對象，參數值為name,pull,put,
name:如果是要兩個列表下進行拖動的話，name的值必須為一樣；
pull:pull用來定義從這個列表容器移動出去的設置，true/false/‘clone'/function

• true :列表容器內的列表單元可以被移出；

• false：列表容器內的列表單元不可以被移出；

• clone：列表單元移出，移動的為該元素的副本；

• function：用來進行pull的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否移出；

put:put用來定義往這個列表容器放置列表單元的的設置，true/false/[‘foo',‘bar']/function；

• true:列表容器可以從其他列表容器內放入列表單元；

• false：與true相反；

• [‘foo',‘bar']：這個可以是一個字符串或者是字符串的數組，代表的是group配置項里定義的name值；

• function：用來進行put的函數判斷，可以進行復雜邏輯，在函數中return false/true來判斷是否放入；

2.animation ms, number 單位：ms，定義排序動畫的時間；
3. handle: 格式為簡單css選擇器的字符串，使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動（你想讓哪個元素拖動就綁定這個元素的class）；
4. onStart:function(evt){}開始拖拽的回調方法；
5. onUpdate:function(evt){}列表內元素順序更新的回調方法；
6. onAdd:function(evt){}元素從一個列表拖拽到另一個列表的回調方法；
7. onRemove:function(evt){} 元素從列表中移除進入另一個列表的回調方法；
這個需求用到這些api也就足夠了。

具體實現

1.第一步先初始化sortable方法，因為我們的需求是兩個表格拖拽，所以初始化2個方法。
html代碼

<s-table
 ref="table"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>
  
<s-table
 class="sort-table"
 ref="table2"
 size="default"
 class="left-table"
 rowKey="key"
 :columns="columns"
 :data="loadData">
</s-table>

具體的columns 和loadData就不多余闡述。

JS代碼

import Sortable from 'sortablejs'
methods:{
 // 初始化 sortable 實現拖動
 initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 開始拖拽的時候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 initSortable1 () {
 var that = this
 var el = this.$el.querySelector('.left-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 onUpdate: function (evt) {
 
 },
 // 開始拖拽的時候
 onStart: function (evt) {
  
 },
 onAdd: function (evt) {
  
 },
 onRemove: function (evt) {
 
 }
 })
 },
 }

關于handle所取的class，因為我們是要對antdesign表格的每一行進行拖拽，所以要選取到他每一行的class。

至此兩個table之間就可以實現拖拽效果，但僅僅只是拖拽效果。
因為這樣拖拽之后，兩邊的數據源并沒有發生變化，而且明明已經拖拽過來之后，另一邊的表格的展示頁會存在錯誤：

排序是我右邊表格特有的，但是這邊的表格是不需要這個排序的，而且如果拖拽成功的話為什么還會顯示暫無數據呢，最后左邊表頭的CheckBox也無法選中。所以到此為止只是有拖拽效果而已。
2.在拖拽動作之后，把左右兩邊的數據源重新賦值，這里有兩種實現思路：

• 每一次拖拽之后都去請求后臺數據，拿到新的數據源之后重新賦值給表格，

• 前端自己做好數據源的處理，等所有的拖拽結束之后排好序再給后臺保存。

考慮到性能消耗，我就選擇了第二種：
1）定義左右兩邊的數據源數組

data(){
 return{
 unMatchedList: [], // 左邊未匹配的數據
 dataList: [], // 右邊已匹配的數據
 pullIndex ：''，//原數組拖拽元素的下標
 }
}

2)在每一次remove或者add的時候更新數據源，這里只寫了一個表格拖拽的方法，另一個只要把that.dataList和that.unMatchedList左右兩邊的數據源賦值調換一下就行，就不貼重復代碼了

 // 開始拖拽的時候
 onStart: function (evt) {
  that.pullIndex = evt.oldIndex
 },
 onAdd: function (evt) {
 //evt.newIndex 移入到新數組的下標
 //pullIndex 原數組拖拽元素的下標
  that.dataList.splice(evt.newIndex, 0, that.unMatchedList[that.pullIndex])
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  //通知table視圖更新
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		 that.$refs.table && this.$refs.table.refresh(true)
  })
 },
 onRemove: function (evt) {
  that.dataList.splice(evt.oldIndex, 1)
  that.dataList.forEach((item, index) => {
  item.sort = index + 1
  })
  that.$nextTick(() => {
  that.$refs.table2 && this.$refs.table2.refresh(true)
 		that.$refs.table && this.$refs.table.refresh(true)
  })
 }
 })

3）實現同一個表格上下拖拽排序

initSortable () {
 var that = this
 var el = this.$el.querySelector('.sort-table tbody')
 Sortable.create(el, {
 handle: '.ant-table-row',
 animation: 150,
 group: { name: 'name', pull: true, put: true },
 //這里千萬不要用onEnd 方法
 onUpdate: function (evt) {
  var o = evt.oldIndex
  var n = evt.newIndex
  if (o === n) {
  return
  }
  that.sortListAndUpdate(that.dataList, o, n)
 },
 })
 },
 // 對數據進行排序，要求 o（oldIndex） 和 n（newIndex） 從 0開始
 sortList (list, o, n) {
 var newTableData = JSON.parse(JSON.stringify(list))
 var data = newTableData.splice(o, 1, null)
 newTableData.splice(o < n ? n + 1 : n, 0, data[0])
 newTableData.splice(o > n ? o + 1 : o, 1)
 return newTableData
 },
 /**
 * 對數據排序并更新 table， 要求 o（oldIndex） 和 n（newIndex） 從 0開始
 */
 sortListAndUpdate (list, o, n) {
 var newTableData = this.sortList(list, o, n)
 newTableData.forEach((item, index) => {
 item.sort = index + 1
 })
 this.$nextTick(() => {
 this.dataList = newTableData
 that.$refs.table2 && this.$refs.table2.refresh(true)
 })
 },

這邊我們選用onUpdate方法來排序，不要用onEnd方法，因為只要你有拖拽效果，都會去觸發onEnd方法，導致左右拖拽完后又會觸發一次排序。

看完上述內容，你們對怎么在antdesign-vue中利用sortablejs實現一個拖拽排序功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。