Comment uni-app+sortable.js implémente-t-il le tri par glisser-déposer ? Partage d'étape

Comment implémenter le tri par glisser-déposer dans uni-app ? L'article suivant vous expliquera comment utiliser sortable.js pour implémenter le tri par glisser-déposer dans uni-app. J'espère que cela vous sera utile !

tri par glisser-déposer uni-app

Avant-propos

Lorsque je créais une page cette semaine, il y avait une fonction de tri des caractères qui pouvait être déplacée manuellement pour modifier la position de tri. Après recherche, j'ai trouvé

sortable.js, qui peut être utilisé pour implémenter cette fonction glisser-déposer.

Idea

Lors de la visualisation du document officiel de sortable.js, j'ai vu qu'il y avait un événement onUpdate après avoir fait glisser pour changer la position. , le retour La valeur contient la valeur d'index de départ et la valeur d'index modifiée. Grâce à cela, vous pouvez modifier le contenu du tableau pour obtenir la fonction de changement de position après le glissement. 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

Étapes

Installer sortable.js

uls.insertBefore(newLi, oldLi.nextSibling)

Obtenir le nœud

Le nœud obtenu ici est le nœud parent qui doit être glissé dans la liste

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

🎜Charger le nœud🎜 🎜

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

🎜🎜🎜 déclencheurs🎜🎜onUpdate🎜🎜 événement🎜🎜🎜🎜Parce qu'au cours du processus, il a été constaté que si la position du nœud dom est utilisée pour modifier le dans l'ordre des éléments, un bug se produira, donc après avoir recherché des informations, j'ai finalement trouvé le problème en utilisant Sortable dans Vue🎜 Avant de modifier l'ordre des éléments, vous devez d'abord modifier le nœud auquel il correspond. 🎜🎜🎜Changer les nœuds🎜🎜🎜Supprimez d'abord le nœud déplacé, puis insérez le nœud déplacé dans le nœud d'origine🎜

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

🎜Remarque : Parce que lorsque vous faites glisser de bas en haut, le nœud augmentera de un, donc l'index d'origine La valeur sera un de moins, car lorsque newIndex < oldIndex, parce que le nœud suivant du nœud oldLi est utilisé 🎜rrreee🎜🎜 pour changer le tableau 🎜🎜🎜 pour supprimer le tableau d'origine, et stocker les données🎜rrreee🎜Ajouter les données à la valeur d'index du tableau restant🎜rrreee🎜🎜Code complet🎜🎜rrreee🎜Recommandé : "🎜tutoriel uniapp🎜"🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!