vuedraggable禁止拖拽出所在区域
时间: 2023-09-28 14:07:56 浏览: 169
如果你想要禁止vuedraggable组件的拖拽出所在区域,可以使用vuedraggable组件提供的`draggable`属性。
你需要在`draggable`属性中设置一个函数,该函数接收两个参数:当前的拖拽元素和它的父元素。你可以在该函数中检查当前元素是否超出了其父元素的边界,并返回一个布尔值来控制该元素是否可以拖拽。
例如,你可以在`draggable`属性中设置以下函数:
```html
<draggable v-model="list" :draggable="checkDraggable">
<!-- your draggable content -->
</draggable>
```
```javascript
methods: {
checkDraggable: function (element, parent) {
const elementRect = element.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
return (
elementRect.left >= parentRect.left &&
elementRect.right <= parentRect.right &&
elementRect.top >= parentRect.top &&
elementRect.bottom <= parentRect.bottom
);
},
},
```
在上面的示例中,`checkDraggable`函数检查拖拽元素是否超出了其父元素的边界。如果拖拽元素在其父元素内,则返回`true`,表示可以拖拽;否则返回`false`,表示不可以拖拽。
这样就可以限制vuedraggable组件的拖拽操作只能在其所在区域内进行了。