<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. Establezca ninguno para permitir el arrastre
disabledA = true;
disabledB= true;
2, está prohibido arrastrar entre los dos
groupA !==groupB
3. Establecer los elementos que tienen prohibido arrastrar.
1),首先设置 :filter=".undraggable"
2),然后通过判断列表中某一个值是否为不可拖动的值并赋值class
:class="[element.age<18 ? 'undraggable':'']"
4, configurado para prohibir arrastrar a un área determinada
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;
}
},