Vue Draggable 实现删除

Vue Draggable是一个轻量级的JavaScript库，它允许你在Vue.js应用程序中轻松地创建可拖动的元素。如果你想要使用Vue Draggable来实现删除功能，通常会配合组件和事件处理来完成。下面是一个简单的步骤示例：

1. 首先，在项目中安装`vue-draggable`库，可以使用npm或yarn:

   npm install vue-draggable
   # 或者
   yarn add vue-draggable

2. 将`vue-draggable`引入到你的Vue组件中，并将其添加到需要可拖动的元素上：

<template>
  <div id="draggableItems">
    <div v-for="(item, index) in items" :key="index" draggable v-bind="{ group: 'items', drag: dragItem, removeOnSpill: true }">
      {{ item.name }}
      <button @click="deleteItem(index)">删除</button>
    </div>
  </div>
</template>

<script>
import draggable from 'vue-draggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        // ...
      ]
    };
  },
  methods: {
    dragItem(event, source) {
      console.log('Item dragged:', source.item.name);
    },
    deleteItem(index) {
      this.items.splice(index, 1); // 删除指定索引的项
    }
  }
};
</script>

在这个例子中，当用户将元素拖出其所属的组时（`removeOnSpill: true`），`deleteItem`方法会被触发并从数组中移除对应项。