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

Question

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

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

沙盒链接：https://codesandbox.io/s/黎明-snowflake-ej08d0?file=/src/Dustbin.tsx

Answer 1

为什么使用onmouseup？

当用户在元素上释放鼠标按钮时，就会发生 onmouseup 事件。

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

当可拖动元素放入元素中时执行 JavaScript：

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