vuedraggable禁止拖出所在区域
时间: 2023-09-17 15:14:57 浏览: 185
要禁止使用vuedraggable拖出所在区域,可以通过设置vuedraggable组件的options
属性中的group
属性来实现。具体步骤如下:
- 在父组件中引入
vuedraggable
组件,并设置组件的options
属性中的group
属性,例如:
<template>
<div>
<h2>父组件</h2>
<div class="wrapper">
<draggable v-model="list" :options="{group:'items'}">
<div v-for="item in list" :key="item.id" class="item">{{ item.name }}</div>
</draggable>
</div>
</div>
</template>
在上面的代码中,我们设置了options
属性中的group
属性为'items'
,表示所有拖拽元素都属于'items'
分组。
- 在父组件中添加样式,限制拖拽元素只能在所在区域内拖动,例如:
.wrapper {
width: 500px;
height: 300px;
border: 1px solid #ccc;
overflow: auto;
}
.item {
background-color: #f0f0f0;
border: 1px solid #ccc;
margin-bottom: 5px;
padding: 10px;
}
在上面的代码中,我们设置了.wrapper
元素的overflow
属性为auto
,使得当子元素的高度超出父元素时,可以通过滚动条来滚动。同时,我们也设置了.wrapper
和.item
元素的边框和间距样式。
这样,我们就完成了禁止使用vuedraggable拖出所在区域的操作。
阅读全文