I use react-draggable in my project. It helps to visualize some data as tables (draggable tables) collected in a diagram. Now I can move (drag) only one table at a time, but we want to choose some tables and drag them together. Has anyone tried to make the same feature with this library?
Here’s a part of my code:
<Draggable
onDrag={onDrag}
onStop={onChangePositionHandler}
nodeRef={nodeRef}
position={{ x: table.position.x, y: table.position.y }}
zIndex="8"
>
<div
className={styles.MainContainer}
id={table.name}
>
{table.name}
</div>
</Draggable>
And a function for moving a table to save it’s coordinates later:
const onChangePositionHandler = (event, dragElement) => {
onStop();
const changedTable = {
id: table.id,
name: table.name,
isCreatedByUser: table.isCreatedByUser,
isAssociator: table.isAssociator,
color: tableColor,
position: {
x: dragElement.x,
y: dragElement.y
},
columns: table.columns
};
onChangeTableHandler(changedTable, areaName);
};
I found one answer which is close (How to drag multiple objects at once in React?), but all of the tables should drag.
I can put selected tables in a new array, but how to find new coordinates for each after dragging?