如何使用 React DnD 获取实时坐标

Question

ReactJS 的react-dnd库提供了用于拖动的begin和end回调。但是，我在文档中找不到访问在拖动过程中触发的drag事件的方法。在使用react-dnd的组件中访问此事件的正确方法是什么？

我想要实时反馈，以便显示正在进行的拖动的坐标。

预期：

function Draggable({ onDrag, children }) {
const [, drag] = useDrag({
item: { id, type },
onDrag, // this is not available in react-dnd
})
return <div ref={drag}>{children}</div>
}

Answer 1

您可以通过DragLayerMonitor获取实时坐标。

检查文档拖动层监视器和自定义拖动图层示例。

我以这种方式制作了一个滑块组件，它对我来说效果很好。我把它做了一个代码笔，但我不知道如何在这里发布代码笔链接。无论如何，我相信你会弄清楚的，那个自定义拖动层示例对我帮助很大。