<draggable
v-model="myArray1"
:filter=".undraggable"
:disabled="disabledA"
:group="groupA"
:move="move"
>
<transition-group>
<div
v-for="element in myArray1"
:key-name="element.id"
:class="[element.age<18 ? 'undraggable':'']"
:key="element.id"
>
{{ element.name }}
</div>
</transition-group>
</draggable>
<draggable
v-model="myArray2"
:filter=".undraggable"
:disabled="disabledB"
:group="groupB"
:move="move"
>
<transition-group>
<div
v-for="element in myArray2"
:key-name="element.id"
:class="[element.age<18 ? 'undraggable':'']"
:key="element.id"
>
{{ element.name }}
</div>
</transition-group>
</draggable>
1,设置两个都不允许拖动
disabledA = true;
disabledB= true;
2,两个之间禁止拖动
groupA !==groupB
3,设置禁止拖动的元素
1),首先设置 :filter=".undraggable"
2),然后通过判断列表中某一个值是否为不可拖动的值并赋值class
:class="[element.age<18 ? 'undraggable':'']"
4,设置禁止拖动到某一区域
myArray2 渲染出了10个,id分别是从0-9,假如禁止拖动myArray2或者myArray1
的元素到myArray2的第一或第二位,则需要
:move="move"
move(e){
// 这里的e表示即将停靠的元素。
if(e.relatedContext.element.id==='0' || e.relatedContext.element.id==='1'){
return false;
}
},