<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;
}
},
本文转载自: https://blog.csdn.net/weixin_43979503/article/details/128446792
版权归原作者 xielatian 所有, 如有侵权,请联系我们删除。
版权归原作者 xielatian 所有, 如有侵权,请联系我们删除。