Vue拖拽元素时右键翻转触发mouseup中断问题求助

问题核心是右键点击触发的mouseup事件被拖拽逻辑误判为左键释放，导致拖拽中断。以下是具体修复步骤：

1. 在拖拽结束的mouseup事件中过滤右键 #

修改BoxView.vue中绑定到document的mouseup事件处理逻辑，只响应**左键（button === 0）**的释放操作，忽略右键触发的mouseup：

// BoxView.vue 中的 moveItemInit 函数
function moveItemInit(e) {
  // 只允许左键触发拖拽
  if (e.button !== 0) return;

  // 原有拖拽初始化逻辑...

  const onMouseUp = (upEvent) => {
    // 仅当左键释放时才结束拖拽
    if (upEvent.button !== 0) return;

    // 原有拖拽结束逻辑（移除事件绑定、重置状态等）
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
    // ...其他清理代码
  };

  const onMouseMove = (moveEvent) => {
    // 原有拖拽移动逻辑
  };

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
}

2. 完善右键翻转的事件控制 #

在BoxItem.vue的rotateInner函数中，确保完全阻止右键菜单的默认行为和事件冒泡，同时避免干扰拖拽状态：

// BoxItem.vue 中的 rotateInner 函数
function rotateInner(e) {
  // 阻止右键菜单弹出
  e.preventDefault();
  // 阻止事件冒泡到父元素（避免触发BoxView的相关事件）
  e.stopPropagation();

  // 原有翻转逻辑...
  // 比如修改Pinia中的元素状态：
  // store.updateItemRotation(item.id, newRotation);
}

3. 额外优化：拖拽状态锁 #

可以在Pinia或组件内部维护一个isDragging状态，仅当处于拖拽状态时才处理mouseup和mousemove事件，进一步避免误触发：

// 示例：在Pinia store中添加状态
const useBoxStore = defineStore('box', {
  state: () => ({
    isDragging: false,
    // ...其他状态
  }),
  actions: {
    startDragging() {
      this.isDragging = true;
    },
    stopDragging() {
      this.isDragging = false;
    }
  }
});

// 在BoxView的拖拽逻辑中使用
function moveItemInit(e) {
  if (e.button !== 0) return;
  const store = useBoxStore();
  store.startDragging();

  const onMouseUp = (upEvent) => {
    if (upEvent.button !== 0) return;
    store.stopDragging();
    // ...清理逻辑
  };

  const onMouseMove = (moveEvent) => {
    if (!store.isDragging) return;
    // ...拖拽移动逻辑
  };
}

这样修改后，右键点击只会触发翻转功能，不会触发拖拽结束的逻辑，实现左键拖拽和右键翻转的无缝兼容。

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