vuedraggable禁止拖拽出所在区域
时间: 2023-09-28 08:07:52 浏览: 43
可以通过设置`containment`属性来实现禁止拖拽出所在区域。具体操作如下:
1. 在需要禁止拖拽出所在区域的`<draggable>`组件上添加`containment`属性,值为`true`。
```html
<draggable v-model="list" :containment="true">
<!-- ... -->
</draggable>
```
2. 确保所在区域具有固定的大小和定位属性,例如设置`position: relative`。
```html
<div class="wrapper" style="position: relative;">
<draggable v-model="list" :containment="true">
<!-- ... -->
</draggable>
</div>
```
这样就可以实现禁止拖拽出所在区域的效果了。
相关问题
vuedraggable禁止拖出所在区域
要禁止使用vuedraggable拖出所在区域,可以通过设置vuedraggable组件的`options`属性中的`group`属性来实现。具体步骤如下:
1. 在父组件中引入`vuedraggable`组件,并设置组件的`options`属性中的`group`属性,例如:
```html
<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'`分组。
2. 在父组件中添加样式,限制拖拽元素只能在所在区域内拖动,例如:
```css
.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拖出所在区域的操作。
vuedraggable2.4禁止拖拽出所在区域
你可以通过设置 `group` 和 `pull` 属性来实现禁止拖拽出所在区域的功能。
首先,为要禁止拖拽出所在区域的组件设置 `group` 属性为一个字符串。
```html
<draggable v-model="list" group="my-group">
<!-- ... -->
</draggable>
```
然后,在父级组件中设置 `pull` 属性为 `'clone'`,并监听 `change` 事件,判断是否拖拽出了所在区域,若是,则立即删除新复制的元素。
```html
<draggable v-model="list" group="my-group" :pull="'clone'" @change="onChange">
<!-- ... -->
</draggable>
```
```javascript
methods: {
onChange(event) {
const { removed, added, moved } = event;
if (added && added.element) {
const element = added.element;
const parent = element.parentElement;
if (parent !== this.$el) {
parent.removeChild(element);
}
}
}
}
```
这样,当你拖拽一个元素时,会在原位置留下一个占位符,并复制一个新元素,但是你只能在当前区域内拖拽,拖拽到其他区域时,新复制的元素会立即被删除。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)