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])
},
