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、使用

在这个示例中：

1. 使用了Vue 3的ref来创建items的响应式数据。
2. 使用setup函数来设置items、onDragEnd和deleteItem等函数。
3. 使用draggable组件来实现拖拽功能，绑定了items数据。
4. 在拖拽结束时，会触发onDragEnd函数，你可以在这里处理拖拽结束的逻辑。
5. 垃圾桶图标位置的<div>元素设置了@dragover.prevent和@drop="deleteItem"事件，当拖拽到该位置时，会触发deleteItem函数来删除对应的项。
6. 在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>