Moveable: If the container is scaled, the target will not follow the mouse when dragging

[yoyogis]

See the code in codepen:
https://codepen.io/yoyogis/pen/LYEzyOX

There is a style in the parent element, style="transform:scale(0.2, 0.2)". When drag the "moveable" element, it will move less pixels then the mouse.

[daybrush]

@yoyogis

Moveable containers should not be affected by transforms.

Try the following:

const moveable = new Moveable(document.body, ....); // target.parentElement

[yoyogis]

Thanks @daybrush. But in my project I have to drag some elements in a transformed parent container.

[daybrush]

@yoyogis

The target may be inside a transform but not moveable.

Shouldn't only moveable be outside the parent?

[yoyogis]

No, the moveable target in a transformed parent element.
Just think we create some moveable elements in a container, the container and its child elements can be zoom in or zoom out.

[daybrush]

@yoyogis

I will solve this problem. Instead it doesn't seem to be resolved quickly.

Thank you :)

[avrahamcool]

hi, I'm also facing this exact scenario, where I have a scaled container.
how are you planning to fix the issue?
maybe this can be solved by passing an extra parameter to the movable constructor (that can be updated any time using setState).
this parameter will indicate the scaling factor for the X, and Y axis (separately).
that way, the movable can factor in this scaling factor when calculating the deltas on drag, scale, rotate etc. to give a smooth experience.

[daybrush]

@avrahamcool

Maybe I'll release it in two weeks.

[Raphe-dev]

@yoyogis @avrahamcool
That's how I handle zoom / scaled out drag, this.zoom being a value between 0.1 and 2 (10% to 200%)

this.moveable.on("dragStart", ({ target }) => {

origintop = parseInt(target.style.top);
originleft = parseInt(target.style.left);

}).on("drag", ({ target, left, top }) => {

if(origintop || originleft) {
    tleft = left  / this.zoom - (originleft / this.zoom) + originleft;
    ttop = top  / this.zoom - (origintop / this.zoom) + origintop;
} else {
    tleft = left / this.zoom;
    ttop = top / this.zoom;
}

tleft = parseInt(tleft);
ttop = parseInt(ttop);

target.style.left = `${tleft}px`;
target.style.top = `${ttop}px`;
})

BUT, I noticed that the Bottom and Right element snap is quite off when scaled out. Top and Left is ok. Trying to figure this out.

[elja]

Hey @daybrush,

Any updates on this one? This features is really killer for us. If there will be some scaleFactor support then we can build visual editors that work with shapes and has zoom feature.

[daybrush]

@elja

Maybe scheduled for next week.

[daybrush]

This is the problem image.

[Xumochuan]

Hi, @daybrush
How are you?
I have also this issue about scaled container.
When could you possibly release fixed version?

Thanks

[daybrush]

@Xumochuan

Maybe 3.6 (Fri)?

Sorry for not being able to release quickly. There are now various issues linked to this issue.

[daybrush]

@yoyogis @avrahamcool @elja @Raphe-dev

• moveable 0.15.1
• react-moveable 0.18.0
• preact-moveable 0.17.0
• ngx-moveable 0.11.0
• svelte-moveable 0.6.0

Added rootContainer props.
Use rootContainer to document.body or no transform element.
Thank you :)

[yoyogis]

Thanks @daybrush , I will try rootContainer

[yoyogis]

@daybrush I add document.body as rootContainer, but it seems not work, could you look this?
https://codepen.io/yoyogis/pen/LYEzyOX?editors=1010

[daybrush]

@yoyogis

• moveable 0.15.2
• react-moveable 0.18.1
• preact-moveable 0.17.1
• ngx-moveable 0.11.1
• svelte-moveable 0.6.1

New version is upated. Check it again.

[yoyogis]

@daybrush Thank you so much. It work now. 😊