New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drag multiple objects at once #474
Comments
+1, anyone have an existing solution for this? I'd like to avoid writing my own if something is out there…haven't found anything yet, though. |
One of the solutions would be to store some state delta with relative offset in the parent component and then pass it to children, each wrapped in Draggable component. Here is an example: https://stackoverflow.com/a/61469976 function Canvas(props) {
const [delta, setDelta] = useState(null); // cursor offset while dragging, {x:0, y:0}
const [selected, setSelected] = useState([]);
return (
// draggable elements, each wrapped in react-draggable
<DraggableElements delta={delta} onDrag={handleDrag}>
//..
</DraggableElements>
)
} function DraggableElements(props) {
const {children, ...restProps } = props;
const draggable = children.map((child, idx) => <DraggableItem key={idx} id={idx} {...restProps}>{child}</DraggableItem>);
return(
<>{draggable}</>
)
} <ReactDraggable onDrag={ (e, data) => { onDrag({x: data.x, y: data.y }, id) } }>
<g style={delta ? {transform: `translate(${delta.x}px, ${delta.y}px)`} }>
//...
</g>
</ReactDraggable> |
Unfortunately this approach doesn't work really well, because ReactDraggable permanently changes changes css properties of underlying element, so if the element will be dragged several times it will result jumps: It would be cool if react-draggable could work in "DragHandler" mode, when it proses mouse/touch events for drag&drop, but doesn't change DOM of elements, so the transformation could be handled onStart, |
anyone found a solution for this? |
Use DraggableCore and manage the state yourself.
…On Sun, Feb 21, 2021 at 4:50 AM amoghadami ***@***.***> 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
<#474 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJEKP3WSLE5NBUFDZ47UVDTADJQDANCNFSM4MQ7KF2A>
.
|
We implemented this exact use case in our react-flow library. It looks something like this:
Hope it helps :) |
Hi @moklick can you provide some demo or sample? |
Is there a solution for this yet? |
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 .. 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.
The text was updated successfully, but these errors were encountered: