一、template 里
<draggable
v-model="myArray"
group="people"
@start="drag = true"
@end="drag = false"
>
<div v-for="element in myArray" :key="element.id">{{ element.name }}</div>
</draggable>
<table>
<draggable
v-model="items"
tag="tbody"
:move="handleMove"
@end="handleDragEnd"
:options="{ animation: 500 }"
>
<tr class="movable" v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</draggable>
</table>
二、data 里
myArray: [
{ id: 1, name: "name1" },
{ id: 2, name: "name2" },
{ id: 3, name: "name3" }
],
items: [
{ id: 1, name: "Bianka Effertz", age: 37 },
{ id: 2, name: "Mckayla Bogan", age: 20 },
{ id: 3, name: "Estevan Mann", age: 17 },
{ id: 4, name: "Cloyd Ziemann", age: 55 }
]
三、methods 里
handleDragEnd(e) {
console.log(e);
console.log(e.newIndex);
console.log(e.oldIndex);
console.log("dragEnd");
this.futureItem = this.items[this.futureIndex];
this.movingItem = this.items[this.movingIndex];
const _items = Object.assign([], this.items);
_items[this.futureIndex] = this.movingItem;
_items[this.movingIndex] = this.futureItem;
this.items = _items;
},
handleMove(e) {
const { index, futureIndex } = e.draggedContext;
this.movingIndex = index;
this.futureIndex = futureIndex;
return false; // disable sort
},