uni-app+sortable.js怎麼實現拖曳排序？步驟分享

uni-app中怎麼實現拖曳排序？以下這篇文章為大家介紹一下uni-app中使用sortable.js實作拖曳排序的方法，希望對大家有幫助！

uni-app 拖曳排序

#前言

這週做一個頁面時，有一個人物排序，可以手動拖曳更改排序位置的功能。經過尋找之後，找到了

sortable.js，它可以用來實作這個拖曳的功能。

想法

在檢視sortable.js官方文件時，看到裡面有一個onUpdate 事件，拖曳改變位置後，其中的回傳值中，就有起始index值和改變後的index值，透過這個，就可以更改陣列的內容，來達到拖曳後改變位置的功能。

步驟

安裝sortable.js

npm install sortablejs --save-dev

取得節點

這裡取得的節點是需要拖曳清單的父節點

let uls = document.getElementById('list')

載入節點

 new Sortable(uls,{})

##觸發onUpdate<span style="font-size: 18px;"></span>事件

#因為在做的過程中，發現如果使用操作dom節點的位置去修改item的順序時，會產生bug，所以經過查找資料，終於在

Vue中使用Sortable找到了問題所在，因此在修改item順序前，應先修改其對於的節點。

改變節點

先刪除移動的節點，在將移動的節點插入到原有的節點中

newLi = uls.children[newIndex],  //移动节点
oldLi = uls.children[oldIndex];  //原有节点
uls.removeChild(newLi) // 删除移动的节点
uls.insertBefore(newLi, oldLi) // 将移动节点插入到原有节点中

注意：因為當從下向上拖曳時，節點會增加一個，所以原有的索引值會少一位，所在當

newIndex < oldIndex時，因使用oldLi節點的下一個節點

uls.insertBefore(newLi, oldLi.nextSibling)

更改數組

刪除原有數組，並且儲存資料

let item = _this.items.splice(oldIndex, 1)

將資料加入停留的數組索引值上

_this.items.splice(newIndex, 0, item[0])

完整程式碼

let uls = document.getElementById('list')
    new Sortable(uls, {
      onUpdate: function (event) {
        //获得基础数据
        let newIndex = event.newIndex,
          oldIndex = event.oldIndex,
          newLi = uls.children[newIndex],
          oldLi = uls.children[oldIndex];
        // 删除原有节点
        uls.removeChild(newLi)
        // 将移动的节点插入原有节点中
        if (newIndex > oldIndex) {
          uls.insertBefore(newLi, oldLi)
        } else {
          uls.insertBefore(newLi, oldLi.nextSibling)
        }
        // 修改数组
        let item = _this.items.splice(oldIndex, 1)
        _this.items.splice(newIndex, 0, item[0])
      },

推薦：《

uniapp教學》

以上是uni-app+sortable.js怎麼實現拖曳排序？步驟分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！