vue实现列表拖拽
Vue 实现列表拖拽的方法
在 Vue 中实现列表拖拽功能，可以通过原生 HTML5 的拖放 API 或使用第三方库如 vuedraggable。以下是两种常见的方法：
使用 HTML5 拖放 API
HTML5 提供了原生的拖放 API，可以通过监听拖放事件实现列表拖拽功能。
<template>
<div>
<ul>
<li
v-for="(item, index) in list"
:key="index"
draggable="true"
@dragstart="handleDragStart(index)"
@dragover.prevent
@drop="handleDrop(index)"
>
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
draggedIndex: null
};
},
methods: {
handleDragStart(index) {
this.draggedIndex = index;
},
handleDrop(index) {
const draggedItem = this.list[this.draggedIndex];
this.list.splice(this.draggedIndex, 1);
this.list.splice(index, 0, draggedItem);
}
}
};
</script>使用 vuedraggable 库
vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽库，使用起来更加简单高效。
安装依赖：
npm install vuedraggable使用示例：
<template>
<div>
<draggable v-model="list" @end="onDragEnd">
<div v-for="(item, index) in list" :key="index">
{{ item }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
};
},
methods: {
onDragEnd() {
console.log('拖拽完成', this.list);
}
}
};
</script>注意事项
- 使用 HTML5 拖放 API 时，需要手动处理拖拽逻辑，适合简单场景。
vuedraggable提供了更多高级功能，如动画、拖拽手柄等，适合复杂场景。- 在移动端使用时，可能需要额外处理触摸事件。
两种方法均可实现列表拖拽功能，根据项目需求选择合适的方式。
