用vue+vuedraggable实现拖拽

<template>
  <div>
    <div class="box" v-for="box in boxes" :key="box.id">
      <h3>{{ box.name }}</h3>
      <draggable v-model="box.icons" :options="dragOptions">
        <div v-for="icon in box.icons" :key="icon.id" class="icon">
          {{ icon.name }}
        </div>
      </draggable>
    </div>
    <button @click="addBox">添加盒子</button>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
  components: {
    draggable
  },
  data() {
    return {
      boxes: [
        {
          id: 1,
          name: 'a',
          icons: [
            { id: 1, name: '图标1' },
            { id: 2, name: '图标2' },
            { id: 3, name: '图标3' }
          ] 
       }
      ]
    };
  },
  methods: {
    addBox() {
      const newBox = {
        id: this.boxes.length + 1,
        name: String.fromCharCode(96 + this.boxes.length + 2),
        icons: []
      };
      this.boxes.push(newBox);
    }
  },
  computed: {
    dragOptions() {
      return {
        group: 'icons',
        animation: 150
      };
    }
  }};
</script>
<style scoped>
.box {  border: 1px solid #ccc;  padding: 10px;  margin-bottom: 10px;}
.icon {  background-color: #eee;  padding: 5px;  margin-bottom: 5px;}
</style>