vuedraggable限制拖拽范围

要限制vuedraggable的拖拽范围，可以使用`drag`事件和`cancel`方法来实现。具体做法如下：

1. 在vuedraggable中添加`@drag`事件，监听拖拽事件，并保存当前拖拽元素的位置信息。

<draggable v-model="list" @drag="onDrag">
  <!-- ... -->
</draggable>

<script>
export default {
  data() {
    return {
      list: [],
      dragPos: null // 保存拖拽元素的位置信息
    }
  },
  methods: {
    onDrag(evt) {
      this.dragPos = { x: evt.clientX, y: evt.clientY };
    }
  }
};
</script>

2. 在vuedraggable的外层容器上添加`@mousemove`事件监听鼠标移动事件，并在事件处理函数中计算拖拽元素的位置是否超出限制范围，如果超出则调用`cancel`方法取消拖拽。

<template>
  <div @mousemove="onMouseMove">
    <draggable v-model="list" @drag="onDrag" ref="draggable">
      <!-- ... -->
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      dragPos: null // 保存拖拽元素的位置信息
    }
  },
  methods: {
    onDrag(evt) {
      this.dragPos = { x: evt.clientX, y: evt.clientY };
    },
    onMouseMove(evt) {
      if (!this.dragPos) {
        return;
      }
      const draggableEl = this.$refs.draggable.$el;
      const rect = draggableEl.getBoundingClientRect();
      const left = this.dragPos.x - rect.width / 2;
      const top = this.dragPos.y - rect.height / 2;
      const right = left + rect.width;
      const bottom = top + rect.height;
      const isOutOfBounds = left < 0 || top < 0 || right > window.innerWidth || bottom > window.innerHeight;
      if (isOutOfBounds) {
        this.$refs.draggable.cancel();
      }
    }
  }
};
</script>

在以上代码中，`onMouseMove`方法首先判断是否有拖拽元素，如果没有则直接返回。然后获取拖拽元素的位置信息，计算出拖拽元素的左上角和右下角坐标，判断是否超出限制范围，如果超出则调用`cancel`方法取消拖拽。

需要注意的是，以上代码只能限制在浏览器窗口范围内拖拽，如果要限制在其他容器内拖拽，则需要根据容器的位置和大小计算出拖拽元素的范围。