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;
	}
},
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值