Is there a way to select multiple RnD div's together and drag them?

[tulasinandan654]

I have a parent RnD with child RnD div's in it. When a parent is moved, the child's in it should be moved together relative to parent.

[aleciavogel]

Here's a working example I put together (everything you need is in src/App.tsx): CodeSandbox Link

Screen.Recording.2024-03-21.at.1.57.28.PM.mov

To summarize my solution:

• Use setState to track an array of selectedIds
• When you drag an item, subtract its current position from the new position being passed into your onDrag handler. This will be our delta that we can use to calculate the new positions of all the other selected items.
• Iterate through all items that need to be moved (either just the current item, or all items that have an id in selectedIds), adding the delta.x and delta.y to each item's position.x and position.y respectively.

You may need to create a context that tracks the selectedIds and handles the drag events, depending on how complicated your nesting structure is (ie, detecting if all selected ids are for items in the same row/layer). In my example, I just have one giant container component that handles everything, so YMMV.