vuedraggable限制拖拽范围

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

在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>

在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方法取消拖拽。
需要注意的是，以上代码只能限制在浏览器窗口范围内拖拽，如果要限制在其他容器内拖拽，则需要根据容器的位置和大小计算出拖拽元素的范围。