vue实现卡片拖动排序
Vue 实现卡片拖动排序的方法
使用 Vue 实现卡片拖动排序可以通过原生 HTML5 的拖放 API 或第三方库如 vuedraggable 来实现。以下是两种方法的详细说明。
使用 HTML5 拖放 API
HTML5 提供了原生的拖放 API，可以通过 draggable 属性和相关事件（如 dragstart、dragend、dragover、drop）实现拖拽排序。
<template>
<div>
<div
v-for="(item, index) in items"
:key="item.id"
draggable="true"
@dragstart="handleDragStart(index)"
@dragover.prevent="handleDragOver(index)"
@drop="handleDrop(index)"
class="draggable-item"
>
{{ item.text }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" },
],
draggedIndex: null,
};
},
methods: {
handleDragStart(index) {
this.draggedIndex = index;
},
handleDragOver(index) {
if (this.draggedIndex !== index) {
const draggedItem = this.items[this.draggedIndex];
this.items.splice(this.draggedIndex, 1);
this.items.splice(index, 0, draggedItem);
this.draggedIndex = index;
}
},
handleDrop() {
this.draggedIndex = null;
},
},
};
</script>
<style>
.draggable-item {
padding: 10px;
margin: 5px;
background: #f0f0f0;
cursor: move;
}
</style>使用 vuedraggable 库
vuedraggable 是一个基于 Sortable.js 的 Vue 拖拽组件，提供了更简单的 API 和更丰富的功能。
安装 vuedraggable：
npm install vuedraggable示例代码：
<template>
<div>
<draggable v-model="items" @end="onDragEnd">
<div v-for="item in items" :key="item.id" class="draggable-item">
{{ item.text }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, text: "Item 1" },
{ id: 2, text: "Item 2" },
{ id: 3, text: "Item 3" },
],
};
},
methods: {
onDragEnd() {
console.log("拖动完成，当前顺序：", this.items);
},
},
};
</script>
<style>
.draggable-item {
padding: 10px;
margin: 5px;
background: #f0f0f0;
cursor: move;
}
</style>两种方法的对比
-
HTML5 拖放 API：
- 无需额外依赖，适合简单场景。
- 需要手动处理更多细节（如索引更新、事件阻止默认行为）。
-
vuedraggable：- 功能更强大，支持动画、跨列表拖拽等高级功能。
- 代码更简洁，适合复杂场景。
根据项目需求选择合适的方法。如果需要快速实现且功能简单，可以使用 HTML5 API；如果需要更多功能或简化代码，推荐使用 vuedraggable。
