Wie implementiert uni-app+sortable.js die Drag-and-Drop-Sortierung? Schritt teilen

Wie implementiert man die Drag-and-Drop-Sortierung in der Uni-App? Im folgenden Artikel erfahren Sie, wie Sie sortable.js zum Implementieren der Drag-and-Drop-Sortierung in der Uni-App verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Uni-App-Drag-and-Drop-Sortierung

Vorwort

Als ich diese Woche eine Seite erstellt habe, gab es eine Funktion zum Sortieren von Zeichen, die manuell gezogen werden kann, um die Sortierposition zu ändern. Nach der Suche habe ich

sortable.js gefunden, mit dem sich diese Drag-and-Drop-Funktion implementieren lässt.

Idee

Beim Betrachten des offiziellen Dokuments von sortable.js habe ich gesehen, dass darin ein onUpdate-Ereignis enthalten ist, nachdem ich es gezogen habe, um die Position zu ändern , der Rückgabewert enthält den Startindexwert und den geänderten Indexwert. Dadurch können Sie den Inhalt des Arrays ändern, um die Funktion zum Ändern der Position nach dem Ziehen zu erreichen. sortable.js官方文档时，看到里面中有一个onUpdate事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的index值，通过这个，就可以更改数组的内容，来达到拖拽后改变位置的功能。

步骤

安装sortable.js

npm install sortablejs --save-dev

获取节点

这里获取的节点是需要拖拽列表的父节点

let uls = document.getElementById('list')

加载节点

 new Sortable(uls,{})

触发<span style="font-size: 18px;">onUpdate</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

Schritte

Installieren Sie sortable.js

uls.insertBefore(newLi, oldLi.nextSibling)

Nach dem Login kopieren

Holen Sie sich den Knoten

Der hier erhaltene Knoten ist der übergeordnete Knoten, der in die Liste gezogen werden muss

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