基于 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
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
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
2
3
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13