vuedraggable禁止拖拽出所在区域
时间: 2023-10-02 12:03:47 浏览: 39
要禁止vuedraggable拖拽出所在区域,你可以使用`@change`事件和`sortable`的`option`来实现。具体步骤如下:
1. 在vuedraggable组件上绑定`@change`事件,监听拖拽事件。
2. 在`@change`事件中,获取拖拽元素和拖拽目标元素的位置信息,判断是否拖拽出所在区域。
3. 如果拖拽出所在区域,则将拖拽元素放回原来的位置,阻止拖拽操作。
示例代码如下:
```html
<template>
<draggable v-model="list" @change="onChange" :options="{group:{name:'people'}}">
<div v-for="(item, index) in list" :key="index">{{ item }}</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
list: ['Tom', 'Jerry', 'Mickey', 'Minnie'],
};
},
methods: {
onChange(event) {
const { item, from, to } = event;
// 获取拖拽元素和拖拽目标元素的位置信息
const itemRect = item.getBoundingClientRect();
const fromRect = from.getBoundingClientRect();
const toRect = to.getBoundingClientRect();
// 判断是否拖拽出所在区域
if (
itemRect.left < fromRect.left ||
itemRect.right > fromRect.right ||
itemRect.top < fromRect.top ||
itemRect.bottom > fromRect.bottom ||
toRect.left < fromRect.left ||
toRect.right > fromRect.right ||
toRect.top < fromRect.top ||
toRect.bottom > fromRect.bottom
) {
// 将拖拽元素放回原来的位置
event.cancel();
}
},
},
};
</script>
```
在这个示例中,我们使用`@change`事件和`sortable`的`option`来监听拖拽事件,并且获取拖拽元素和拖拽目标元素的位置信息。如果拖拽出所在区域,则将拖拽元素放回原来的位置,阻止拖拽操作。