Modifier transforms don't apply after drag is released

[bguthrie]

I'm having an issue where I'd like to support drag/drop between foreignObject elements in an SVG canvas. dnd-kit treats the origin point for each drag as the relative location inside the foreignObject element rather than relative to the root DndContext. Fair enough, and I'm happy to work around this with a modifier, but modifiers appear to cease to perform transforms once a drag is released.

• What I'd like to do: apply a blanket modifier to the x/y location of a draggable element.
• What I expected: modifier transforms to continue to apply once the drag is released.
• What I observed: modifier transforms cease to apply after a drag is release and return to the incorrect origin point when dropped.

Thanks for your help in advance, and happy to try to supply a patch if you can point me in the right direction.

[clauderic]

Hey @bguthrie, this sounds like quite an advanced use-case. Could you provide a video or better yet (if possible), a CodeSandbox of what you're trying to achieve to illustrate?

[bguthrie]

Here's my an attempt to translate what I'm trying to do: https://codesandbox.io/s/quirky-smoke-yp10w?file=/src/App.js

This example contains a single DnDContext wrapping both a DragOverlay and an svg canvas, which contains a foreignObject with a Draggable as per the example docs. I've taken the liberty of adding a modifier that does what's desired with the transform, which demonstrates the issue with dropping.

[bguthrie]

Couple of other notes:

• The modifier clears values like containerNodeRect on drop, but doesn't adjust drop location even when that rect is cached or when a fixed value is used.
• Since no React DnD library appears to support this use case out of the box, I'm willing to go to a fair bit of trouble to get it working. :)
• Probably goes without saying, but I'm not concerned about the styling in the example, which is... bad.

[Profesor08]

modifier is calling, but result is totaly ignored

[patheticGeek]

@bguthrie I'm also trying to use dnd kit with SVG and have the same problem as you. Were you able to find any workaround to this?

Also, one point to note, it is not limited to foreignObject. Anything in an SVG if dragged, the overlay's origin position will be top right of the viewport. And I had some error with your csb. I forked and updated the library version https://codesandbox.io/s/cranky-shamir-uckzo?file=/src/App.js

[patheticGeek]

modifier is calling, but result is totaly ignored

+1

[victortimsit]

I'm having the same issue, any update on this?