Vue.Draggable 中禁止特定元素拖拽：一个详细指南

vue.js

2024-03-27 23:52:11

Vue.Draggable 中对特定元素禁用拖拽：一个综合指南

问题

在使用 Vue.Draggable 库时，有时需要禁用特定元素的拖拽功能。本文旨在提供一个分步指南，介绍如何仅允许特定元素进行拖拽，而阻止其他元素被拖动。

Vue.Draggable 中禁用拖拽

Vue.Draggable 提供了灵活的方法来管理拖拽行为。通过使用 :move 属性，我们可以自定义拖拽事件并根据需要进行调整。

解决方案：使用 `:move` 属性

要禁用特定元素的拖拽，我们需要在 <draggable> 元素上使用 :move 属性。checkMove 方法将用于检查拖拽事件并决定是否允许拖拽。

<draggable v-model="textElements" :move="checkMove">
  <!-- ... -->
</draggable>

实现 `checkMove` 方法

checkMove 方法使用拖拽事件的 evt 参数来确定拖拽的元素。通过检查 evt.from.getAttribute("class")，我们可以识别正在拖拽的元素。如果该元素不满足我们的条件（例如，不包含特定的类），我们返回 false 以阻止拖拽。

methods: {
  checkMove(evt) {
    const draggedElementClass = evt.from.getAttribute("class");
    if (draggedElementClass !== "my-draggable-element") {
      return false;
    }
    return true;
  },
}

示例实现

<draggable v-model="textElements" :move="checkMove">
  <transition-group>
    <div v-for="element in textElements" :key="element.text">
      <div>{{ element.text }}</div>
      <button class="btn btn-transparent">Options</button>
      <button class="btn btn-transparent my-draggable-element">Drag</button>
    </div>
  </transition-group>
</draggable>