vuedraggable互相拖动：禁止拖动元素，和禁止拖动到的区域，以及禁止拖动整体。-Toy模板网

这篇具有很好参考价值的文章主要介绍了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,设置禁止拖动到某一区域文章来源地址https://www.toymoban.com/news/detail-519622.html

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;
	}
},

到了这里，关于vuedraggable互相拖动：禁止拖动元素，和禁止拖动到的区域，以及禁止拖动整体。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！