vuedraggable限制拖拽区域

你可以通过设置`vuedraggable`的`container`属性来限制拖拽区域。这个属性可以接受一个选择器，用于指定拖拽的范围。只有在指定的容器内才能进行拖拽操作。

例如，如果你想将拖拽限制在特定的父容器内，你可以像这样使用`container`属性：

<template>
  <div class="container">
    <draggable v-model="list" :options="{ container: '.container' }">
      <div v-for="item in list" :key="item.id" class="item">{{ item.text }}</div>
    </draggable>
  </div>
</template>

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

<style>
.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

.item {
  margin: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

在上面的示例中，我们将`draggable`组件放置在一个具有指定类名`.container`的父容器内，这样拖拽操作就会被限制在该容器内部。你可以根据实际需求调整容器的样式和尺寸。

请注意，`vuedraggable`的`container`属性仅在使用原生HTML5拖放的情况下有效，如果你使用了`clone`或`mirror`选项，或者自定义了`dragImage`，则该属性将被忽略。