React 在不可拖动的元素上启用拖动事件

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>

编辑：否

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

我只需要打开拖动事件但不为元素启用可拖动的浏览器行为。

帮助！