while dragGroup, controlbox origin is wrong?

[lisiyizu]

moveable.elementGuidelines = [...document.querySelectorAll('.page-skeleton-creator ._')]

[daybrush]

@lisiyizu

Thank you for reporting bug. I want to know the framework name, framework version, component name, component version you use.

[lisiyizu]

@lisiyizu

Thank you for reporting bug. I want to know the framework name, framework version, component name, component version you use.

thanks for reply!

vue version: 2.6.10

moveable version 0.13.2

moveable code :

moveable = new Moveable(document.body, {
                    target: null,
                    // If the container is null, the position is fixed. (default: parentElement(document.body))
                    container: document.body,
                    draggable: true,
                    resizable: true,
                    warpable: false,
                    pinchable: false, // ["resizable", "scalable", "rotatable"]
                    origin: true,
                    snappable: true,
                    verticalGuidelines: [0, 100, 100],
                    horizontalGuidelines: [0, 100, 100],
                    // Resize, Scale Events at edges.
                    edge: true,
                    throttleDrag: 0,
                    throttleResize: 0,
                }).on("drag", ({ target, left, top, beforeDelta }) => {
                    target.style.left = wPercent(left) + '%'; // left+ + "px";
                    target.style.top = hPercent(top) + '%'; // top + "px";
                }).on("dragEnd", ({ target, isDrag }) => {
                    moveable.updateRect();
                    moveable.updateTarget();
                }).on("resize", ({ target, width, height, dist }) => {
                    target.style.width = wPercent(width) + '%';//width + "px";
                    target.style.height = hPercent(height) + '%';//height + "px";
                }).on("scale", ({ target, delta }) => {
                    // scale[0] *= delta[0];
                    // scale[1] *= delta[1];
                    // target.style.transform = "scale(" + scale[0] + "," + scale[1] + ")";
                    // moveable.updateRect();
                }).on("dragGroup", ({ targets, events }) => {
                    events.forEach(ev => {
                        ev.target.style.left = wPercent(ev.left) + '%'; // left+ + "px";
                        ev.target.style.top = hPercent(ev.top) + '%'; // top + "px";
                    });
                    moveable.updateRect();
                    moveable.updateTarget();
                }).on("dragGroupEnd", ({ targets, isDrag, clientX, clientY }) => {
                    moveable.updateRect();
                });
                moveable.elementGuidelines = [...document.querySelectorAll('.page-skeleton-creator ._')]

[daybrush]

@lisiyizu

I tried it locally but it doesn't reproduce well.

I can keep asking you some questions to solve the problem.

First I want to know why you called updateRect and updateTarget. I don't think this code is necessary.

Also, can you take a picture or gif of the moveable-area's CSS when you set up the group and the origin goes to 0,0?

[daybrush]

@lisiyizu

That can happen if the drag target is a moveable controlbox.

You probably need to add defensive code.

if (!moveable.isMoveableElement(e.target)) {
    moveable.target = e.target;
}

[lisiyizu]

@lisiyizu

That can happen if the drag target is a moveable controlbox.

You probably need to add defensive code.

if (!moveable.isMoveableElement(e.target)) {
    moveable.target = e.target;
}

thanks for you suggestion!

[lisiyizu]

@lisiyizu That can happen if the drag target is a moveable controlbox. You probably need to add defensive code.

if (!moveable.isMoveableElement(e.target)) {
    moveable.target = e.target;
}

thanks for your suggestion! I don't know where to put the code.

[daybrush]

@lisiyizu

I don't know because I don't know your code well.

I think it's time to change the target.