基于 vue 列表拖拽排序

# html部分

<ul @dragover="dragover($event)">
   <transition-group class="transition-wrapper" name="sort">
    <li
      v-for="(item, i) in dataList"
      :key="item.id"
      class="sort-item"
      :draggable="true"
      @dragstart="dragstart(item, $event)"
      @dragenter="dragenter(item, $event)"
      @dragend="dragend(item, $event)"
      @dragover="dragover($event)"
    >
       {{item.name}}
    </li>
  </transition-group>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# js部分

export default {
  dragstart(value, e) {
    e.target.classList.add("dragover");
    this.oldData = value;
  },
  // 记录移动过程中信息
  dragenter(value, e) {
    this.newData = value;
    e.preventDefault();
  }, 
  // 拖拽最终操作
  dragend(value, e) {
    e.target.classList.remove("dragover");
    if (this.oldData !== this.newData) {
      let oldIndex = this.dataList.indexOf(this.oldData);
      let newIndex = this.dataList.indexOf(this.newData);
      let newItems = [...this.dataList]; // 删除老的节点
      newItems.splice(oldIndex, 1); // 在列表中目标位置增加新的节点
      newItems.splice(newIndex, 0, this.oldData);
      this.dataList = [...newItems];
    }
  }, 
  // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
  dragover(e) {
    e.preventDefault();
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# css部分

.sort-move {
  transition: transform 0.3s;
}

1
2
3

#Vue

上次更新: 2024/01/30, 00:35:17

← 在vue中如何使用watch深度监听对象中值的变化基于 vue 图片裁剪（vue-cropper）→