vuedraggable 指定区域内可拖动

VueDraggable 是一个 Vue.js 的拖拽组件，它可以让你实现元素在指定区域内的拖拽排序。为了指定区域内可拖动，你可以使用 `draggable` 属性来控制元素是否可拖动，以及使用 `group` 属性来指定拖拽元素所属的组别。

例如，你可以在组件中使用以下代码来指定可拖动区域：

<template>
  <div>
    <div class="drag-container">
      <div v-for="(item, index) in list" :key="item.id" class="drag-item" :draggable="true">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
      ],
    };
  },
};
</script>

在上面的代码中，我们设置了 `draggable` 属性为 `true`，表示这些元素可以被拖动。此外，我们还可以使用 `group` 属性来将元素分组，以便在多个可拖拽区域之间实现拖放操作。例如，以下代码演示如何将拖拽元素分组：

<template>
  <div>
    <div class="drag-container">
      <div v-for="(item, index) in list1" :key="item.id" class="drag-item" :draggable="true" :group="{ name: 'list1' }">
        {{ item.name }}
      </div>
    </div>

    <div class="drag-container">
      <div v-for="(item, index) in list2" :key="item.id" class="drag-item" :draggable="true" :group="{ name: 'list2' }">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
      ],
      list2: [
        { id: 5, name: "Item 5" },
        { id: 6, name: "Item 6" },
        { id: 7, name: "Item 7" },
        { id: 8, name: "Item 8" },
      ],
    };
  },
};
</script>

在上面的代码中，我们将 `list1` 和 `list2` 的元素分别分组，并将它们渲染到不同的可拖拽区域中。这样，你就可以在这两个区域之间实现拖放操作了。