uni-app中怎么實現(xiàn)拖拽排序？下面本篇文章給大家介紹一下uni-app中使用sortable.js實現(xiàn)拖拽排序的方法，希望對大家有所幫助！

uni-app 拖拽排序

前言

這周做一個頁面時，有一個人物排序，可以手動拖動更改排序位置的功能。在經(jīng)過查找之后，找到了

sortable.js，它可以用來實現(xiàn)這個拖拽的功能。

思路

在查看sortable.js官方文檔時，看到里面中有一個onUpdate事件，拖拽改變位置后，其中的返回值中，就有著起始index值和改變后的index值，通過這個，就可以更改數(shù)組的內(nèi)容，來達到拖拽后改變位置的功能。

步驟

安裝sortable.js

npm install sortablejs --save-dev

獲取節(jié)點

這里獲取的節(jié)點是需要拖拽列表的父節(jié)點

let uls = document.getElementById('list')

加載節(jié)點

 new Sortable(uls,{})

觸發(fā)onUpdate事件

因為在做的過程中，發(fā)現(xiàn)如果用操作dom節(jié)點的位置去修改item的順序時，會產(chǎn)生bug，所以經(jīng)過查找資料，終于在Vue中使用Sortable找到了問題所在，因此在修改item順序前，應(yīng)先修改其對于的節(jié)點。

改變節(jié)點

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

newLi = uls.children[newIndex],  //移動節(jié)點 oldLi = uls.children[oldIndex];  //原有節(jié)點 uls.removeChild(newLi) // 刪除移動的節(jié)點 uls.insertBefore(newLi, oldLi) // 將移動節(jié)點插入到原有節(jié)點中

注意：因為當從下向上拖動時，節(jié)點會增加一個，所以原有的索引值會少一位，所在當newIndex < oldIndex時，因使用oldLi節(jié)點的下一個節(jié)點

uls.insertBefore(newLi, oldLi.nextSibling)

更改數(shù)組

刪除原有數(shù)組，并且存儲數(shù)據(jù)

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

將數(shù)據(jù)添加到停留的數(shù)組索引值上

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

完整代碼

let uls = document.getElementById('list')     new Sortable(uls, {       onUpdate: function (event) {         //獲得基礎(chǔ)數(shù)據(jù)         let newIndex = event.newIndex,           oldIndex = event.oldIndex,           newLi = uls.children[newIndex],           oldLi = uls.children[oldIndex];         // 刪除原有節(jié)點         uls.removeChild(newLi)         // 將移動的節(jié)點插入原有節(jié)點中         if (newIndex > oldIndex) {           uls.insertBefore(newLi, oldLi)         } else {           uls.insertBefore(newLi, oldLi.nextSibling)         }         // 修改數(shù)組         let item = _this.items.splice(oldIndex, 1)         _this.items.splice(newIndex, 0, item[0])       },

推薦：《uniapp教程》