###
Vue3 中
使用 vuedraggable 实现
拖拽功能的示例
在
Vue3 中实现
拖拽功能，可以
使用 `
vuedraggable`
组件。以下是详细的实现方法和代码示例：
#### 安装
vuedraggable
首先需要安装适用于
Vue3 的 `
vuedraggable` 版本：
```bash
npm install
vuedraggable@next
```
确保安装的是支持
Vue3 的版本[^2]。
#### 引入
vuedraggable
在项目中引入 `
vuedraggable` 并注册为
组件：
```javascript
import { defineComponent } from "
vue";
import
draggable from "
vuedraggable";
export default defineComponent({
components: {
draggable,
},
});
```
####
使用 vuedraggable
以下是一个简单的
拖拽列表示例，展示如何在
Vue3 中
使用 `
vuedraggable`：
```
vue
<template>
<div>
<h3>可
拖拽列表</h3>
<
draggable v-model="items" @end="onDragEnd" class="drag-area">
<div v-for="(item, index) in items" :key="index" class="drag-item">
{{ item }}
</div>
</
draggable>
</div>
</template>
<script>
import { defineComponent } from "
vue";
import
draggable from "
vuedraggable";
export default defineComponent({
components: {
draggable,
},
data() {
return {
items: ["Item 1", "Item 2", "Item 3", "Item 4"],
};
},
methods: {
onDragEnd(event) {
console.log("
拖拽结束", event);
},
},
});
</script>
<style scoped>
.drag-area {
min-height: 100px;
border: 1px solid #ccc;
padding: 10px;
}
.drag-item {
margin: 5px 0;
padding: 8px;
background-color: #f9f9f9;
border: 1px solid #ddd;
cursor: move;
}
</style>
```
上述代码创建了一个可
拖拽的列表，用户可以通过
拖拽改变列表项的顺序。当
拖拽结束时，会触发 `onDragEnd` 方法，并输出
拖拽事件的相关信息[^3]。
#### 高级特性
`
vuedraggable` 提供了丰富的特性，例如支持触摸设备、智能滚动、跨列表
拖拽等。以下是一些常用属性的说明：
- `v-model`：绑定数据源。
- `@start`：
拖拽开始时触发。
- `@end`：
拖拽结束时触发。
- `group`：定义
拖拽组，用于跨列表
拖拽。
- `move`：控制是否允许
拖拽某个元素[^2]。
#### 删除功能示例
如果需要实现
拖拽到垃圾桶图标位置进行删除的功能，可以参考以下代码：
```
vue
<template>
<div>
<h3>可
拖拽列表</h3>
<
draggable v-model="items" group="people" @end="onDragEnd" class="drag-area">
<div v-for="(item, index) in items" :key="index" class="drag-item">
{{ item }}
</div>
</
draggable>
<div class="trash-bin" @drop="handleDrop" @dragover.prevent>
<span>垃圾桶</span>
</div>
</div>
</template>
<script>
import { defineComponent } from "
vue";
import
draggable from "
vuedraggable";
export default defineComponent({
components: {
draggable,
},
data() {
return {
items: ["Item 1", "Item 2", "Item 3", "Item 4"],
};
},
methods: {
onDragEnd(event) {
console.log("
拖拽结束", event);
},
handleDrop(event) {
const draggedElement = event.dataTransfer.getData("text/plain");
this.items = this.items.filter((item) => item !== draggedElement);
},
},
});
</script>
<style scoped>
.drag-area {
min-height: 100px;
border: 1px solid #ccc;
padding: 10px;
}
.drag-item {
margin: 5px 0;
padding: 8px;
background-color: #f9f9f9;
border: 1px solid #ddd;
cursor: move;
}
.trash-bin {
margin-top: 20px;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: red;
color: white;
border-radius: 5px;
}
</style>
```
上述代码实现了将列表项
拖拽到垃圾桶图标位置进行删除的功能[^1]。
---
###
本文介绍了一个简单实用的功能，@change事件能够实时反馈排序数组的变化情况，便于开发者即时获取数组排序后的最新状态。
扫一扫
8788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
