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

【问题标题】：How to get realtime coordinates with React DnD如何使用 React DnD 获取实时坐标
【发布时间】：2020-09-16 11:31:49
【问题描述】：

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>
}

【问题讨论】：

标签： javascript reactjs drag-and-drop draggable react-dnd

【解决方案1】：

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

检查文档DragLayerMonitor 和custom drag layer example。

我以这种方式制作了一个滑块组件，它对我来说效果很好。我把它做成了一个codepen，但我不知道如何在这里发布codepen链接。无论如何，我相信你会明白的，custom drag layer example对我帮助很大。

【讨论】：