How does uni-app+sortable.js implement drag and drop sorting? Step sharing

How to implement drag and drop sorting in uni-app? The following article will introduce to you how to use sortable.js to implement drag and drop sorting in uni-app. I hope it will be helpful to you!

uni-app drag and drop sorting

Preface

Make one this week On the page, there is a character sorting function that can be manually dragged to change the sorting position. After searching, I found

sortable.js, which can be used to implement this drag-and-drop function.

Thoughts

When viewing the official document of sortable.js, I saw that there is an onUpdate in it event, after dragging to change the position, the return value contains the starting index value and the changed index value. Through this, you can change the content of the array to achieve the function of changing the position after dragging.

Steps

Installationsortable.js

npm install sortablejs --save-dev

Get node

The node obtained here is the parent node that needs to be dragged into the list

let uls = document.getElementById('list')

Load node

 new Sortable(uls,{})

Trigger<span style="font-size: 18px;">onUpdate</span>Event

Because in the process of doing it, I found that if I use the position of the dom node to operate When modifying the order of items, a bug will occur, so after searching for information, I finally found the problem using Sortable in Vue. Therefore, before modifying the order of items, you should first modify the corresponding node.

Change Node

Delete the moved node first, then insert the moved node into the original node

newLi = uls.children[newIndex],  //移动节点
oldLi = uls.children[oldIndex];  //原有节点
uls.removeChild(newLi) // 删除移动的节点
uls.insertBefore(newLi, oldLi) // 将移动节点插入到原有节点中

Note: Because when changing from When dragging down and up, one node will be added, so the original index value will be one less. When newIndex , the next node of the <code>oldLi node will be used.

uls.insertBefore(newLi, oldLi.nextSibling)

Change the array

Delete the original array and store the data

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

Add the data to the remaining array index value

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

Complete code

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

Recommended: "uniapp tutorial"

The above is the detailed content of How does uni-app+sortable.js implement drag and drop sorting? Step sharing. For more information, please follow other related articles on the PHP Chinese website!