Y Direction of Element Changing Automatically. How to set X, Y position for the moveable target
Parth909 opened this issue Β· comments
Environments
Framework name: React v16
Framework version: 0.56.0
Moveable Component version:
Description
The Y Co-ordinate of the element is changing automatically when a new element is added.
In the below video π you can see that when the first textbox is added the translate(x, y) is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'.
Problem is when the second textbox is added the translate(x, y) is 70px & 70px for the target div with class 'selecto-selectable' but 70px & 160px for Moveable Control Box
react-moveable_changing_y_automatically.mp4
Solutions Tried
Tried changing the css when onChangeTargets
event is fired but only the position of the control box changes & something seems like broken.
onChangeTargets={(e) => {
// Because we are using the same Moveable Component when a new layer is added the "Moveable Control Box" shift down & after a few layers goes outside the div.
console.log("onChangeTargets", e);
if (
e.moveable &&
Array.isArray(e.targets) &&
e.targets.length > 0
) {
// target's style is correct translate(70px, 70px)
let target = e.targets[0];
e.moveable.controlBox.style.transform =
target.style.transform;
e.moveable.controlBox.style.webkitTransform =
target.style.transform;
}
}}
You can see in the below video π the way it is broken the box is somewhere else & the text is somewhere but there styles is 70px & 70px for the Moveable Control Box and for the target div with class 'selecto-selectable'
text_placed_incorrectly.mp4
Here is the link to the full code where I'm using InfiniteViewer, react-moveable, react-selecto.
https://pastebin.com/XqBUXV31