vuedraggable禁止拖拽出所在区域

你可以使用vuedraggable的`move`事件来检查拖动项目的位置，如果它超出了所在区域，则将其放回到该区域内。

例如，假设你有一个列表，其中每个项目都有一个固定大小的容器，你可以像这样实现：

<template>
  <div class="list">
    <draggable v-model="list" :move="checkMove">
      <div v-for="item in list" class="item">{{ item.name }}</div>
    </draggable>
  </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' },
      ],
      containerRect: null,
    };
  },
  mounted() {
    // 获取容器的位置和大小
    this.containerRect = this.$el.getBoundingClientRect();
  },
  methods: {
    checkMove(evt) {
      // 获取拖动元素的位置和大小
      const rect = evt.draggedContext.element.getBoundingClientRect();

      // 检查是否超出容器范围
      if (
        rect.left < this.containerRect.left ||
        rect.right > this.containerRect.right ||
        rect.top < this.containerRect.top ||
        rect.bottom > this.containerRect.bottom
      ) {
        // 如果超出，将元素放回到原来的位置
        evt.draggedContext.futureIndex = evt.draggedContext.index;
      }
    },
  },
};
</script>

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

.item {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用`getBoundingClientRect()`方法获取容器和拖动项目的位置和大小。然后，我们在`checkMove`方法中检查拖动项目是否超出了容器范围。如果是，则将其放回到原来的位置。