反应在不可拖动元素上启用拖动事件

Question

一个非常简单的问题-但没有找到简单的答案。 我想在元素上启用拖动事件（onDragStart，onDrag，onDragEnd等），但我不希望元素在尝试拖动时为拖动设置动画（例如，将draggable传递给组件时）。 我该如何实现？

<div
  onDragStart={() => console.log("onDragStart")} //does not fire
  // draggable   // dont want this - or just disable animation when trying to drag
>
  someContent
</div>

Answer 1

在尝试了一下自己之后，我得出了答案。 传递draggable以在元素上启用拖动事件，并禁用动画，以防止onDragStart上的默认设置。

如果有人也需要答案，将在这里留下答案。

<div
  onDragStart={(e) => {
              console.log("onDragStart") // do what you need here
              e.preventDefault();        // then prevent animation
            }}
  draggable   
>
  someContent
</div>

编辑

这是一些进步，但不能完全回答我的问题。 我所做的不是取消动画，而是取消动画以及所有拖动事件随后在同一元素上发生。但是我需要在onDrop事件上触发该元素（我没有忘记在onDragOver上使用e.preventDefault（））。 我需要触发onDrop事件。所以我可以真正禁用动画，但让其余的拖动事件定期触发吗？

代码和框

https://codesandbox.io/s/drag-with-not-animation-b3eh7?file=/src/App.js 拜托了伙计们。你能行的。这是一个样本

明白了

终于明白了。 可以使用DataTransfer.setDragImage()函数通过将空白图像传递到拖动的元素来禁用动画。

const emptyImg = new Image();
<div
  onDragStart={(e) => e.dataTransfer.setDragImage(emptyImg, 0, 0)}
  draggable   
>
  someContent
</div>

编辑：否

在这里我仍然需要帮助。 您可以关闭动画，但是行为仍将是可拖动元素。

我只需要打开拖动事件，而无需启用该元素的可拖动浏览器行为。

帮助！