score:-1

As far as I understand all you need offset of currently dragging element, via HTML5Backend you can't get, but if you use MouseBackend you can easily get the coordinates https://github.com/zyzo/react-dnd-mouse-backend

see example of with preview

score:2

You can use

ReactDOM.findDOMNode(component).getBoundingClientRect();

Ref: https://reactjs.org/docs/react-dom.html#finddomnode

Or just make a ref to your component instance and get getBoundingClientRect() on the instance within a onmousemove event.

score:4

The useDrop hook has a hover(item, monitor) method which does what you are looking for. It triggers repeatedly while you are hovering over the drop target.

score:4

I'm posting this way after the fact, but in case anyone is looking for this answer, the react-dnd way of doing this is by using what they call a Drag Layer - it gives you a way to use a custom component to be displayed when dragging.

They have a full example here: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/02-drag-around/custom-drag-layer?from-embed=&file=/src/CustomDragLayer.jsx

Also in the docs you want to look at useDragLayer and DragLayerMonitor

score:4

From what I remember, custom drag layer had serious performance issues. It's better to directly subscribe to the underlying API (the official documentation is severely lacking, but you can get this information from reading drag layer source):

const dragDropManager = useDragDropManager();
const monitor = dragDropManager.getMonitor();

React.useEffect(() => monitor.subscribeToOffsetChange(() => {
  const offset = monitor.getClientOffset();
  // do stuff like setState, though consider directly updating style through refs for performance
}), [monitor]);

You can also use some flag based on drag state to only subscribe when needed (simple isDragging && monitor.subscribe... plus dependencies array does the trick).


Related Query

More Query from same tag