npm install --save vue-draggable
<template>
<draggable v-model="list" @end="onDragEnd">
<div v-for="(item, index) in list" :key="item.id">
<span>{{ item.id }}</span>
<span>{{ item.name }}</span>
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
// Add more items as needed
]
};
},
methods: {
onDragEnd(event) {
// 在拖拽结束时更新顺序号
this.list.forEach((item, index) => {
item.id = index + 1;
});
}
}
};
</script>
<style>
/* 样式调整 */
</style>