vuedraggable禁止拖出所在区域

你可以通过设置`draggable`的`options`属性来禁止拖出所在区域。具体操作如下：

1. 设置`draggable`的`options`属性为一个对象，该对象包含以下属性：
- `group`: 指定拖拽元素所属的分组，该属性必须设置。
- `preventOnFilter`: 一个布尔值，表示是否在过滤器中禁止拖动，该属性可选。

<draggable v-model="list" :options="{ group: 'items', preventOnFilter: true }">
  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
</draggable>

2. 在`draggable`元素上添加`@drag`事件处理函数，该函数会在拖动元素时触发。在该函数中，可以通过`event`对象的`cancel`方法来阻止元素拖出所在区域。

<draggable v-model="list" :options="{ group: 'items', preventOnFilter: true }" @drag="onDrag">
  <div v-for="item in list" :key="item.id">{{ item.text }}</div>
</draggable>

methods: {
  onDrag(event) {
    const el = event.item;
    const target = event.to;
    const rect = target.getBoundingClientRect();
    const x = event.clientX;
    const y = event.clientY;
    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
      event.cancel();
    }
  }
}

在上面的代码中，我们首先获取拖拽元素的`DOM`元素和目标容器的`DOM`元素，然后获取目标容器的矩形范围和鼠标位置，最后通过比较鼠标位置与容器范围来决定是否取消拖拽。