vue3实现vuedraggable实现拖拽到垃圾桶图标位置进行删除
当使用Vue 3和vuedraggable库时，你可以按照以下方式实现拖拽到垃圾桶图标位置进行删除的功能：
首先，确保你已经安装了vuedraggable库。如果没有安装，可以通过以下命令进行安装：
vuedraggable 和vue-draggable-plus使用非常类似，你可以自己选择安装哪种。
vue-draggable-plus中文文档参考：
https://vue-draggable-plus.pages.dev/guide/
1、安装：
npm install vue-draggable-plus2、引入
import { VueDraggable } from "vue-draggable-plus";3、使用
在这个示例中：
- 使用了Vue 3的
ref来创建items的响应式数据。 - 使用
setup函数来设置items、onDragEnd和deleteItem等函数。 - 使用
draggable组件来实现拖拽功能，绑定了items数据。 - 在拖拽结束时，会触发
onDragEnd函数，你可以在这里处理拖拽结束的逻辑。 - 垃圾桶图标位置的
<div>元素设置了@dragover.prevent和@drop="deleteItem"事件，当拖拽到该位置时，会触发deleteItem函数来删除对应的项。 - 在
deleteItem函数中，根据拖拽的数据项的id来过滤掉对应的项，实现删除功能。
<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 class="trash-can" @dragover.prevent @drop="deleteItem">🗑️ Drag Here to Delete</div></div>
</template><script>
import { ref } from 'vue';
import draggable from 'vuedraggable';export default {components: {draggable},setup() {const items = ref([{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' },{ id: 4, text: 'Item 4' }]);const onDragEnd = (event) => {// 拖拽结束时的逻辑};const deleteItem = (event) => {const itemId = event.dataTransfer.getData('text/plain');items.value = items.value.filter(item => item.id.toString() !== itemId);};return {items,onDragEnd,deleteItem};}
};
</script><style>
.trash-can {border: 2px dashed #ccc;padding: 20px;margin-top: 20px;text-align: center;cursor: pointer;
}
</style>