DragOverlay cursor offset

[el-dav]

Hi, first of all thanks for a great library. I was hoping someone could point me in the right direction.

I'm looking at a situation using DragOverlay where the Overlay is a different size to the draggable as seen in this codesandbox: https://codesandbox.io/s/damp-smoke-wnu7y?file=/src/App.js

When you begin dragging the DragOverlay's initial position is the top-left of the original draggable element which means it's offset from the cursor position.

I would like the DragOverlay's initial position to be under the cursor.

Is this something which would be done with a listener or modifier? I couldn't see the cursor position in the available data so I wasn't sure of the recommended way to achieve this.

Many thanks!

[fikrikarim]

I have this exact use case and I haven't found any clean and working solution without tweaking the internal library.

I'm interested if there's an easy way to implement this.

[clauderic]

This seems like a fairly common use-case, if you're willing to open a PR, it should just be a matter of exposing the activatorEvent to modifiers.

Having said that, not all activator events will have screen coordinates – for example, if the activator is the keyboard sensor, you won't have any coordinates to go off of – but I think that's an okay limitation given this use-case.

[el-dav]

This seems like a fairly common use-case, if you're willing to open a PR, it should just be a matter of exposing the activatorEvent to modifiers.

Having said that, not all activator events will have screen coordinates – for example, if the activator is the keyboard sensor, you won't have any coordinates to go off of – but I think that's an okay limitation given this use-case.

That makes sense. It would allow me to adjust the transform based on the relative cursor position to the activated draggable.

I've just started to look at the library internals now. One issue seems to be that I can't see a way to adjust the width/height of the collisionRect using a modifier. It seems like transform only supports x and y. (in addition to scaleX and scale Y, but I've not figured out what these do yet).

Without the capability of adjusting the width/height (or top/bottom/left/right) of the collision rect in a modifier it seems like the collision detection will be off as it will be based on the width/height of the original draggable rect, rather than the width/height of the rect in the DragOverlay.

[trentmwillis]

We have a similar issue where we have a drag handle that is offset from the dragged object, which means our DragOverlay is offset from the cursor as well.

Has a way to support this been implemented yet? If not, I'd be happy to implement the approach suggested above as well as a related modifier.

[trentmwillis]

After futzing with this for a couple hours, I decided to go ahead and take a stab at implementing a solution. Opened #334 with the result.

[mmchesley]

I really appreciate this library and snapCenterToCursor is so close to doing what I need. However, it seems that the collision box doesn't update to match the location of the overlay. Anyone have ideas for how to work around that? Or could snapCenterToCursor be updated to account for this?

Update: Just saw this solution, which works perfectly for my use case, but it would still be great to have this built-in

[Tommuh]

Was having the same problem as @mmchesley - the rendered draggable looks spot on, but the collision box doesn't.

[MarcusDelvecchio]

Same issue here.

[dperetti]

Crazy that this it's still a thing. Looks like a common issue. 😨

[dperetti]

Wait I've spent hours on this, challenged chatGPT, Claude, Grok to find a solution and Gemini just told me to add collisionDetection={pointerWithin} to DndContext and it works. 🤦‍♂️