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

Question

用于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> } 的组件中访问此事件的正确方法是什么？

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

预期：

<root>  
  <country>    
    <city name="Boston" value="100">
    <city name="Boston" value="200">
   </country>
  </root>

Answer 1

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

检查文档DragLayerMonitor和custom drag layer example。

我以这种方式制作了一个滑块组件，它对我来说效果很好。我将其设为Codepen，但我不知道如何在此处发布Codepen链接。无论如何，我相信您会发现custom drag layer example对我有很大帮助。