Open markvital opened 4 years ago
+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: codepen.io/markvital/pen/vYNZXgW
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, onDrag
, onStop
calls.
anyone found a solution for this?
Use DraggableCore and manage the state yourself.
On Sun, Feb 21, 2021 at 4:50 AM amoghadami notifications@github.com 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 .
We implemented this exact use case in our react-flow library. It looks something like this:
onDrag
handler for all elements (and remember which ones are selected and their positions)data.deltaX
and data.deltaY
of the onDrag
handler and add it to all positions of the selected elementsHope 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.