Drag overlay layout not used for collision detection

[martinpengellyphillips]

Currently it is assumed that the drag overlay will have the same dimensions as the draggable it represents. But that is not always true. As a result, a droppable may not activate even if a drag overlay appears over it (because the underlying draggable layout is actually smaller).

Instead should use drag overlay layout in collision detection (when a drag overlay is being used).

[m4rvr]

Hey! Any update on this? Can I somehow prevent this with a custom collisionDetector?

[martinpengellyphillips]

I've made progress on this in a refactor I'm pursuing. Essentially the overlay will be able to track its own layout and transform independently of the source draggable.

I'm just recovering from covid, but will hopefully build momentum on this and other changes over the next week ready for release.

[m4rvr]

@martinpengellyphillips Thanks for your fast response. Sorry to hear that, I hope you feel better soon!

The refactor sounds great though. Will this take a custom position of the <DragOverlay /> into account? I'm currently applying a custom transform to the <DragOverlay /> to have it always centered to the position of the mouse. It basically looks like this

// onDragMove
setPos({
  x: mousePos().x - draggable.layout.x - width / 2,
  y: mousePos().y - draggable.layout.y - height / 2
})

(width and height are the dimensions from the visible DragOverlay)

<DragOverlay
  style={{
    transform: `translate(${pos().x}px, ${pos().y}px)`
  }}
>

Do you see any problems with this or could that be resolved with your refactor too?

[martinpengellyphillips]

Thanks!

Interesting. The dnd state will be the authority for collision detection (using the layout and transform of the overlay). So I would expect your solution to not work as expected, as your changes are applied outside of the state.

I might be introducing an offset modifier though which could be useful for this case. Longer term I'll consider more robust and flexible "modifiers" support. I'll keep your use case in mind.

Note the refactor will center the DragOverlay over the source draggable on drag start, which might be what you wanted anyway.

[m4rvr]

This sounds really cool, thanks! Now I'm even more excited, can't wait to test it out. 😄

EDIT: Modifiers probably also include the restriction to a single axis like here https://docs.dndkit.com/api-documentation/modifiers? This would be really great because it's exactly what I need.

[martinpengellyphillips]

This is now fixed in 0.7.0 with DragOverlay being used for collision detection.

In addition:

• DragOverlay is auto-centered on the Draggable on drag start.
• You can specify custom transformers for items (see example in release notes).