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

Posted 2023-05-08

【中文标题】如何使用 React DnD 获取实时坐标

【英文标题】：How to get realtime coordinates with 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>

【参考方案1】：

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

检查文档DragLayerMonitor 和custom drag layer example。

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