0


vuedraggable互相拖动: 禁止拖动元素,和禁止拖动到的区域,以及禁止拖动整体。

<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 所有, 如有侵权,请联系我们删除。

“vuedraggable互相拖动: 禁止拖动元素,和禁止拖动到的区域,以及禁止拖动整体。”的评论:

还没有评论