vuedraggable禁止拖出所在区域
时间: 2023-09-14 16:14:01
浏览: 144
你可以在 `vuedraggable` 组件上使用 `[group](https://wenku.csdn.net/doc/34jc7ifwqo?spm=1055.2569.3001.10083&kwd=group)` 属性来指定一个组名,然后在 `draggable` 元素上使用 `group` 属性指定同样的组名。这样,只有在同一组内的元素才可以互相拖拽。
另外,你可以在 `vuedraggable` 组件上使用 `containment` 属性来限制拖拽的范围。比如,如果你希望只能在父元素内拖拽,可以将 `containment` 设置为 `'parent'`。如果你希望只能在指定的元素内拖拽,可以将 `containment` 设置为该元素的选择器。
下面是一个示例:
```html
<div id="app">
<div [class](https://wenku.csdn.net/doc/6401ac18cce7214c316ea9b4?spm=1055.2569.3001.10083&kwd=class)="container">
<draggable v-[model](https://wenku.csdn.net/doc/6401ace1cce7214c316ed7d8?spm=1055.2569.3001.10083&kwd=model)="list" group="[items](https://wenku.csdn.net/doc/6412b6cbbe7fbd1778d47ffb?spm=1055.2569.3001.10083&kwd=items)" :containment="'parent'">
<div v-for="item in list" :key="item.id" class="item" :class="{ active: item.active }" :data-id="item.id">
{{ item.name }}
</draggable>
<[script](https://wenku.csdn.net/doc/6412b5b8be7fbd1778d44272?spm=1055.2569.3001.10083&kwd=script)>
new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: 'Item 1', active: false },
{ id: 2
```
最低
0.47元/天
开通会员,查看完整答案
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
C知道免费提问
付费资源9折优惠