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)

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)

🎜Laden Sie den Knoten. 🎜

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

Um die Reihenfolge der Elemente zu ändern, tritt ein Fehler auf. Nach der Suche nach Informationen habe ich schließlich das Problem bei der Verwendung von Sortable in Vue gefunden🎜 Bevor Sie die Reihenfolge der Elemente ändern, sollten Sie zunächst den Knoten ändern, dem sie entspricht. 🎜🎜🎜Knoten ändern🎜🎜🎜Löschen Sie zuerst den verschobenen Knoten und fügen Sie dann den verschobenen Knoten in den ursprünglichen Knoten ein🎜

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

🎜Hinweis: Denn beim Ziehen von unten nach oben erhöht sich der Knoten um eins, also der ursprüngliche Index Der Wert wird eins weniger sein, denn wenn newIndex < oldIndex, weil der nächste Knoten des oldLi-Knotens verwendet wird 🎜rrreee🎜🎜, um das Array zu ändern 🎜🎜🎜, um das zu löschen ursprüngliches Array und speichere die Daten🎜rrreee🎜Füge die Daten zum verbleibenden Array-Indexwert hinzu🎜rrreee🎜🎜Vollständiger Code🎜🎜rrreee🎜Empfohlen: „🎜uniapp-Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonWie implementiert uni-app+sortable.js die Drag-and-Drop-Sortierung? Schritt teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!