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

Question

react-dnd ReactJS 库提供 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获取实时坐标。

查看文档DragLayerMonitor and the custom drag layer example。

我用这种方法制作了一个滑块组件，对我来说效果很好。我把它做成一个codepen，但我不知道如何post codepen link 这里。不管怎样，我相信你会明白的，custom drag layer example对我帮助很大。