Drag multiple objects at once

Hi, 
Is it possible to drag multiple draggable instances at once? I’m using draggable to manipulate geometric shapes. The objects are in different positions in DOM model, so I can not wrap them in one <Draggable>…</Draggable> instance.

Here is an example of what I want to achieve: When I drag the rectangle, rounded square or triangle, all 3 should move at the same time. I have to maintain the order in which the objects overlap while dragging (so I can’t wrap all of them into one element).

It would be great to have some sort of draggableGroup attribute to assign to different draggable components. Or some way to exchange information between different draggable elements. I know such a possibility exists in react-dnd, but it’s a much complicated framework to use for me.

[moklick]

We implemented this exact use case in our react-flow library. It looks something like this:

1. wrap all draggable elements with DraggableCore (you always need to store all positions of your elements and pass it to the DraggableCore wrapper)
2. append the onDrag handler for all elements (and remember which ones are selected and their positions)
3. when the user drags an element you can use data.deltaX and data.deltaY of the onDrag handler and add it to all positions of the selected elements

Hope it helps 😃

[STRML]

Use DraggableCore and manage the state yourself.

On Sun, Feb 21, 2021 at 4:50 AM amoghadami [e-mail] wrote:

anyone found a solution for this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/STRML/react-draggable/issues/474#issuecomment-782829603, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJEKP3WSLE5NBUFDZ47UVDTADJQDANCNFSM4MQ7KF2A .