如何在dragend事件中区分拖拽完成与取消？拖拽时捕获keydown事件？

一、区分拖拽是ESC取消还是正常结束 #

原生拖拽中，ESC触发dragend时dropEffect确实始终为none（尤其是你没用到数据传输机制时），但可以通过提前标记取消状态来区分：

• 在dragstart阶段给document绑定keydown事件，监听ESC键，设置一个标记变量
• 在dragend里检查这个标记，就能判断拖拽是被ESC取消还是正常完成
• 记得在dragend解绑键盘事件，避免内存泄漏

代码示例：

let isCancelledByESC = false;
const dragElement = document.getElementById('your-draggable-div');

dragElement.addEventListener('dragstart', (e) => {
  const handleKeydown = (keyEvt) => {
    if (keyEvt.key === 'Escape') {
      isCancelledByESC = true;
      keyEvt.preventDefault(); // 可选，阻止ESC的默认页面行为
    }
  };
  
  document.addEventListener('keydown', handleKeydown);
  // 存下处理器方便后续解绑
  dragElement._keyHandler = handleKeydown;
});

dragElement.addEventListener('dragend', (e) => {
  // 解绑事件
  document.removeEventListener('keydown', dragElement._keyHandler);
  delete dragElement._keyHandler;
  
  if (isCancelledByESC) {
    // 拖拽被ESC取消的逻辑，比如恢复元素初始位置
    console.log('拖拽已取消');
  } else {
    // 拖拽正常结束的逻辑
    console.log('拖拽完成');
  }
  
  // 重置标记
  isCancelledByESC = false;
});

二、拖拽过程中捕获keydown事件（完全可行） #

你之前觉得没法捕获是误解——原生拖拽期间，document的keydown事件是可以正常触发的，只要把事件绑定到document上就能监听。比如要实现拖拽时按空格切换吸附功能：

修改上面的handleKeydown函数即可：

const handleKeydown = (keyEvt) => {
  if (keyEvt.key === 'Escape') {
    isCancelledByESC = true;
    keyEvt.preventDefault();
  } else if (keyEvt.key === ' ') {
    // 切换吸附状态的自定义函数
    toggleSnapFeature();
    keyEvt.preventDefault(); // 避免空格触发页面滚动
  }
};

核心逻辑就是：拖拽期间，全局的键盘事件依然能被document捕获，只要提前绑定就能实现键盘交互。

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