如何在vuedraggable的move事件中满足条件时编程取消拖拽？

在拖拽元素经过固定不可移动元素时，我们需要完成手动交换后立即终止拖拽流程，可通过以下步骤实现：

1. 获取Draggable组件实例 #

先给模板中的draggable组件添加ref，方便后续调用内部方法：

<draggable
  ref="draggableRef"
  :list="fields"
  item-key="id"
  handle=".draggable"
  :move="draggableOnMove"
>
<!-- 子元素模板内容 -->
</draggable>

2. 在move事件中完成交换并终止拖拽 #

在TypeScript逻辑中，先声明ref实例，然后在满足条件时调用组件的cancel()方法终止拖拽，同时返回false阻止默认位置变更：

import { ref } from 'vue';

// 声明Draggable组件的ref实例
const draggableRef = ref<any>(null);

const draggableOnMove = (e: any) => {
  const context = e.draggedContext;
  const related = e.relatedContext;

  // 检测当前拖拽是否经过固定元素
  if (related.element.value?.fixed) {
    // 查找最近的可交换元素索引（避免数组越界）
    let swappableIndex = context.futureIndex + 1;
    while (swappableIndex < fields.value.length && fields.value[swappableIndex]?.value?.fixed) {
      swappableIndex++;
    }

    // 找到有效可交换元素后执行交换并终止拖拽
    if (swappableIndex < fields.value.length) {
      fieldsComposable.swap(context.index, swappableIndex);
      // 调用cancel方法立即结束拖拽会话
      draggableRef.value?.cancel();
      // 返回false阻止默认的位置调整逻辑
      return false;
    }
  }

  // 默认允许正常拖拽移动
  return true;
};

关键说明 #

• draggableRef.value?.cancel()：直接调用Vue.Draggable内部的cancel方法，会立即终止当前拖拽流程，即使未松开鼠标也不会继续执行拖拽相关操作。
• 返回false：阻止move事件默认的位置变更逻辑，避免和我们手动交换元素的逻辑产生冲突。

内容的提问来源于stack exchange，提问作者aspirinemaga