vuedraggable禁止拖拽出所在区域
时间: 2023-09-25 08:09:19 浏览: 53
要禁止vuedraggable拖拽出所在区域,可以使用`group`属性来指定同一区域的元素,然后使用`lockAxis`属性来锁定拖拽方向,再结合一些事件和方法来限制拖拽范围。
例如,假设我们有一个包含多个列表的父级容器,每个列表都可以通过vuedraggable进行拖拽排序,我们可以在每个列表上添加以下属性:
```html
<draggable v-model="list" :group="{name:'items', pull:'clone', put:false}" :lock-axis="true" @start="dragStart" @end="dragEnd" :move="checkMove">
<!-- 列表内容 -->
</draggable>
```
其中,`group`属性中的`name`值要相同,表示同一区域;`pull`值为`clone`表示可以拖拽复制,`put`值为`false`表示不能将元素拖到其他列表中。
然后,我们可以使用`lockAxis`属性来锁定拖拽方向,例如:
```html
<draggable v-model="list" :group="{name:'items', pull:'clone', put:false}" :lock-axis="true" @start="dragStart" @end="dragEnd" :move="checkMove">
<!-- 列表内容 -->
</draggable>
```
在`dragStart`事件中,我们可以记录当前列表的位置和大小,例如:
```js
dragStart(event) {
this.containerRect = event.target.getBoundingClientRect()
}
```
在`dragEnd`事件中,我们可以清空位置和大小记录,例如:
```js
dragEnd() {
this.containerRect = null
}
```
最后,在`move`方法中,我们可以判断拖拽元素是否超出当前列表的范围,然后返回`false`来禁止拖拽,例如:
```js
checkMove(event) {
if (!this.containerRect) return true
const dragRect = event.draggedContext.element.getBoundingClientRect()
return (
dragRect.left >= this.containerRect.left &&
dragRect.top >= this.containerRect.top &&
dragRect.right <= this.containerRect.right &&
dragRect.bottom <= this.containerRect.bottom
)
}
```