[onDragEnd离开视口时不触发

Posted 2021-04-29

我发现当将图层从视口中拖出并释放鼠标按钮时，该图层仍处于dragmove状态。您是否遇到过此类问题？

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

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

谢谢！

答案

为mouseleave设置全局事件

使用useState在应用程序级别设置状态。可以将其传递给依赖于鼠标在视口中的组件。然后触发一些操作以“释放”拖动的对象。

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

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