monitor.getDifferenceFromInitialOffset reports wrong values in overflowing, autoscrolled container

Some browsers (Chrome in my case, FF does not) allow you to drag elements to the edge of an overflowing container, and will scroll the container for you.

In this case monitor.getDifferenceFromInitialOffset() (and possiby others as well) will report wrong deltas because the scrolled distance is not being taken into account.

[filexandr]

Hello everybody,

I want back attention to the issue. We perform custom rendering of a drag item using custom DragLayer how it’s shown in https://react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer. Everything works fine till the moment of dragging around edges of the container when auto scroll happens. I’ve forked original example and have created inner div with size 1000x1000 (styled with red border). Outer div is styled with overflow: ‘auto’. These are only 2 changes. You can try to drag to right or to bottom edge, wait till browser scrolling and drop the item somewhere. You should notice the item is disappeared and moved inside of original 300x300 box: https://codesandbox.io/s/react-dnd-example-6-eyw7w

This is because a drag item original coordinates are taken only on beginning of drag (INIT_COORDS action) and then during drag any shift of the item is not taken into account. So all monitor.get*Offset functions return wrong result. We performed custom compensation: when DragLayer renders we are taking getBoundingClientRect() for the drag item and add difference between original and current values to monitor offset. It works but sometimes the drag item is not compensated till a mouse move. So our thoughts on this, would be good to have :

• this compensation built-in in the lib in effective, safe and performant way;
• an example with relative custom DragLayer which moves together with container. In the case custom render of the drag item is stable on a scroll but still require compensation of coordinates on pointer move.

Hope somebody uses custom render with scroll and looking for the lib improvement in the area as we. Thanks and looking forward for a support!

Alex.

[gaearon]

Closing as inactive. Not sure this is actionable on library part.