vuedraggable禁止拖拽出所在区域

要禁止 `vuedraggable` 组件中的元素拖拽到所在区域之外，可以使用 `draggable` 的 `options` 属性。

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

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
      dragOptions: {
        group: 'items',
        preventOnFilter: false,
        filter: '.nodrag',
        sort: false,
        draggable: '.draggable',
        handle: '.handle',
        ghostClass: 'ghost',
        chosenClass: 'chosen',
        dragClass: 'dragging',
        setData: function (dataTransfer, dragEl) {
          dataTransfer.setData('Text', dragEl.textContent);
        },
        // 禁止拖拽出所在区域之外
        onMove: function (evt, originalEvent) {
          return evt.relatedRect.top <= evt.draggedRect.top + 10 &&
            evt.relatedRect.bottom >= evt.draggedRect.bottom - 10 &&
            evt.relatedRect.left <= evt.draggedRect.left + 10 &&
            evt.relatedRect.right >= evt.draggedRect.right - 10;
        },
      },
    };
  },
};
</script>

<style>
.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.nodrag {
  pointer-events: none;
}

.handle {
  cursor: move;
}
</style>

在 `dragOptions` 中设置 `onMove` 函数，该函数接收两个参数 `evt` 和 `originalEvent`，其中 `evt` 包含当前拖拽元素的位置和大小等信息，`originalEvent` 是原始的拖拽事件。

在 `onMove` 函数中，判断当前拖拽元素的边界是否在父元素内部，如果不在，则返回 `false`，表示该元素不能继续拖拽。