使用 React-dnd 删除组件时不会触发 Mouseup 事件

Question

我正在做一个项目，我需要使用 React-dnd 包实现拖放功能。这是我能够实现的。但问题是，目标组件（将放置可拖动项目的位置）包含 mouseup 事件，该事件在每种情况下都会触发，除非我在其中放置任何组件。即使在掉落的情况下也需要触发它，但它没有被触发。我也尝试过手动触发，它触发了，但是像偏移量这样的值并不符合预期。

我分享了示例代码沙箱，其中 Dustbin.tsx 包含 mouseup 事件，当任何可拖动组件放入其中时该事件不会被触发。谢谢

沙盒link：https://codesandbox.io/s/dawn-snowflake-ej08d0?file=/src/Dustbin.tsx

Answer 1

为什么要使用 onmouseup？

The onmouseup event occurs when a user releases a mouse button over an element.

如果您想检测容器内是否有东西掉落，请使用 ondrop

Execute a JavaScript when a draggable element is dropped in a element:

return (
    <div
      ref={drop}
      style={{ ...style, backgroundColor }}
      onDrop={() => console.log("dropped")}
    >
      {isActive ? "Release to drop" : "Drag a box here"}
    </div>
);

使用 React-dnd 删除组件时不会触发 Mouseup 事件

Mouseup event not getting triggered when component is dropped using React-dnd

javascript

reactjs

react-dnd

onmouseup