在dragend事件中查看拖动是否被取消

Question

我正在拖动div。有时，我想通过按键盘退出键来取消拖动。这结束了拖动（“dragend”被触发），但我似乎无法弄清楚如何在“dragend”处理程序中区分拖动是否成功完成或取消。有办法吗？

请注意，我没有使用自动复制/移动/数据传输机制，因为拖动对象时会发生一些特定的事情，这些事情与简单地在 DOM 中移动对象不同。因此，在我的例子中，“dropeffect”始终是“none”。

更一般地说，我非常希望在拖动过程中收到“keydown”事件，但它们都完全消失了。这是非常烦人的，因为我确实想要制作一个具有出色键盘支持的 UI，并且我想要的功能之一是能够在拖动过程中修改元素（例如，想象一下您想要的“捕捉”功能）在拖动过程中打开或关闭）。 不幸的是，我确实相信后一种是不可能的。但至少前者可行吗？

Answer 1

dropEffect

对象的

dataTransfer

来确定拖动发生了什么。它是“无”，它不起作用。其他的都成功了。Firefox 有一个前缀属性

mozUserCancelled

会告诉你它是否被中止，但这不是标准的。

我查看了

处理模型规范

，最好提到“转义”键的处理并没有真正与其他中止区分开来：

如果当前的拖动操作为“none”（无拖动操作），或者，如果 用户通过取消拖放操作来结束拖放操作（例如，通过 按 Escape 键），或者如果当前目标元素为 null， 然后拖动操作失败。运行这些子步骤：

1. 让 drop 为 false。
   如果当前目标元素是 DOM 元素，则向其触发名为 Dragleave 的 DND 事件；否则，如果它不为空，则使用 用于取消拖动的特定于平台的约定。
   将当前拖动操作设置为“无”。

const dragEl = document.querySelector('#drag');
const dropEl = document.querySelector('#drop');

dragEl.addEventListener('drag', (e) => {
  e.preventDefault();
});

dragEl.addEventListener('dragend', (e) => {
  e.preventDefault();

  //console.log(e.dataTransfer);

  console.log(`mozUserCancelled: ${e.dataTransfer.mozUserCancelled}`);
  console.log(`dropped: ${e.dataTransfer.dropped}`);
  console.log(`dropEffect: ${e.dataTransfer.dropEffect}`);
});

dropEl.addEventListener('dragenter', (e) => {
  e.preventDefault();
});

dropEl.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropEl.addEventListener('drop', (e) => {
  e.preventDefault();

  console.log('dropped');

  const t = e.dataTransfer.getData('text/plain');
  console.log(t);
});

#drag,
#drop {
  padding: 1em;
  margin: 1em;
  background-color: lightblue;
  color: white;
}

<div id="drag" draggable="true">Drag</div>

<div id="drop">Drop</div>