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-plus
2、引入
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>
原文地址:https://blog.csdn.net/weixin_38483133/article/details/140354544
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!