vuedraggable2.4禁止拖拽出所在区域
时间: 2023-09-26 14:05:41 浏览: 40
你可以通过设置 `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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)