Implement sorting and drag-and-drop functions in pop-up windows

Sortable.js Chinese website (sortablejs.com)

When writing background management projects, we will implement some sorting and drag-and-drop functions in pop-up windows. This plug-in library can meet your needs. The following is the code I wrote to implement sorting and drag-and-drop functions in pop-up windows. Share it for everyone.

<div class="listbox" ref="listbox">
        <div class="box" v-for="(item, index) in pointsList" :key="index">
          <div> {
   
   { item._id }} </div>
          <div> {
   
   { item.pointName }} </div>
          <div> {
   
   { item.classifyId }} </div>
          <close-circle-outlined />
          <div class="deldiv" @click="deletebox(index)">+</div>
        </div>
      </div> 
// 实现拖拽排序功能
  function initSortable() {
    nextTick(() => {
      if (!listbox.value) {
        return;
      }
      Sortable.create(listbox.value, {
        sort: true,
        animation: 200,
        onEnd: (evt) => {
          const item = pointsList.value.splice(evt.oldIndex, 1);
          console.log(evt.newIndex, pointsList.value, item);
          pointsList.value.splice(evt.newIndex, 0, item[0]);
          console.log(pointsList.value);
        },
      });
    });
  }