reactjs - 离开视口时未触发 onDragEnd

Question

我发现当将图层拖出视口并释放鼠标按钮时，图层仍处于拖动状态。你遇到过这样的问题吗？

看看这里：https ://codesandbox.io/s/llxq3yv829?file=/index.js

将红色矩形拖出视口，它仍然粘在光标上。

谢谢！

Answer 1

为 mouseleave 设置全局事件

用于useState在应用级别设置状态。这可以传递给依赖于鼠标在视口中的组件。然后触发一些东西来“释放”被拖动的对象。

document.addEventListener("mouseleave", (event) => {
  setState({inViewport: false})
}

在示例中，将状态传递给组件。