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

uni-app 拖拽排序

前言

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

sortable.js，它可以用來(lái)實(shí)現(xiàn)這個(gè)拖拽的功能。

思路

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

步驟

安裝sortable.js

npm install sortablejs --save-dev

獲取節(jié)點(diǎn)

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

let uls = document.getElementById('list')

加載節(jié)點(diǎn)

 new Sortable(uls,{})

觸發(fā)onUpdate事件

因?yàn)樵谧龅倪^(guò)程中，發(fā)現(xiàn)如果用操作dom節(jié)點(diǎn)的位置去修改item的順序時(shí)，會(huì)產(chǎn)生bug，所以經(jīng)過(guò)查找資料，終于在Vue中使用Sortable找到了問(wèn)題所在，因此在修改item順序前，應(yīng)先修改其對(duì)于的節(jié)點(diǎn)。

改變節(jié)點(diǎn)

先刪除移動(dòng)的節(jié)點(diǎn)，在將移動(dòng)的節(jié)點(diǎn)插入到原有的節(jié)點(diǎn)中

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

注意：因?yàn)楫?dāng)從下向上拖動(dòng)時(shí)，節(jié)點(diǎn)會(huì)增加一個(gè)，所以原有的索引值會(huì)少一位，所在當(dāng)newIndex < oldIndex時(shí)，因使用oldLi節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)

uls.insertBefore(newLi, oldLi.nextSibling)

更改數(shù)組

刪除原有數(shù)組，并且存儲(chǔ)數(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é)點(diǎn)         uls.removeChild(newLi)         // 將移動(dòng)的節(jié)點(diǎn)插入原有節(jié)點(diǎn)中         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教程》