vue实现组件拖拽和删除自适应

Vue 框架中实现组件拖拽和删除自适应最常用的方法是使用 vuedraggable 插件，它是一个基于 Vue.js 的拖动重新排序的插件。

首先，您需要安装 vuedraggable：

npm install vuedraggable
然后在组件中引入：
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
在模板中使用：
<draggable v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
如果要实现删除，可以在每个元素上加上删除按钮：
<draggable v-model="list">
  <div v-for="item in list" :key="item.id">
    {{ item.name }}
    <button @click="remove(item)">删除</button>
</draggable>
在 methods 中添加 remove 方法：
methods: {
  remove (item) {
    this.list.splice(this.list.indexOf(item), 1)
这样，您就可以实现组件的拖拽和删除了。