search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.14k stars 622 forks source link

When I set the property target of moveable to array, it will not work！ #171

Closed lisiyizu closed 4 years ago

lisiyizu commented 4 years ago

Environments

moveable version：v.13.4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>moveable issues 171</title>
    <script src="https://daybrush.com/moveable/release/0.13.4/dist/moveable.min.js"></script>
</head>

<body>
    <style>
        #page-skeleton-creator-nxqvy2snps {
            position: relative;
            overflow: hidden;
            width: 1440px;
            height: 821px;
        }

        @keyframes opacity {
            0% {
                opacity: 1
            }

            50% {
                opacity: .5
            }

            100% {
                opacity: 1
            }
        }

        ._ {
            position: absolute;
            background: #f2f3f5;
        }
    </style>
    <div id='page-skeleton-creator-nxqvy2snps'>
        <div class="_" style="width: 2.222%; height: 3.898%; left: 1.111%; top: 1.949%; border: 1px solid white;"></div>
        <div class="_"
            style="width: 17.847%; height: 3.41%; left: 5%; top: 2.192%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_" style="width: 1.319%; height: 2.436%; left: 23.403%; top: 2.68%; border: 1px solid white;"></div>
        <div class="_" style="width: 5.771%; height: 2.558%; left: 26.389%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 2.845%; height: 2.558%; left: 33.271%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.522%; height: 2.071%; left: 37.228%; top: 2.862%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 3.334%; height: 2.558%; left: 43.861%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 0.972%; height: 1.705%; left: 92.329%; top: 1.888%; border: 1px solid white; border-radius: 50%;">
        </div>
        <div class="_" style="width: 0.972%; height: 1.949%; left: 91.912%; top: 2.984%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 93.995%; top: 2.984%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 1.389%; height: 2.436%; left: 96.72%; top: 2.817%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_"
            style="width: 4.431%; height: 2.68%; left: 42.847%; top: 11.084%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_"
            style="width: 5.382%; height: 2.68%; left: 49.362%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.117%; height: 2.68%; left: 56.133%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 4.684%; height: 2.68%; left: 59.333%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.125%; height: 2.68%; left: 65.406%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 3.93%; height: 2.68%; left: 68.614%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.775%; height: 2.68%; left: 73.933%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 2.776%; height: 2.68%; left: 77.792%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.377%; height: 2.68%; left: 81.956%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 15.972%; top: 11.328%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 4.985%; height: 2.558%; left: 17.222%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 0.355%; height: 2.558%; left: 22.52%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.394%; height: 2.558%; left: 23.187%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 3.632%; height: 3.045%; left: 16.806%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_" style="width: 0.972%; height: 1.949%; left: 22.173%; top: 17.661%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 2.688%; height: 2.071%; left: 23.385%; top: 17.54%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 1.006%; height: 1.462%; left: 26.591%; top: 18.027%; border: 1px solid white; border-radius: 20px;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 29.68%; top: 17.661%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.471%; height: 2.071%; left: 30.753%; top: 17.54%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 0.533%; height: 1.462%; left: 36.742%; top: 18.027%; border: 1px solid white; border-radius: 20px;">
        </div>
        <div class="_ target"
            style="width: 4.525%; height: 3.045%; left: 39.288%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 6.211%; height: 3.045%; left: 45.48%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 3.294%; height: 3.045%; left: 53.357%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 4.843%; height: 3.045%; left: 58.318%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 4.803%; height: 3.045%; left: 64.827%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
    </div>
    <script>
        // width百分比
        function wPercent(x) {
            return parseFloat(x / window.innerWidth * 100).toFixed(3);
        }
        // height百分比
        function hPercent(x) {
            return parseFloat(x / window.innerHeight * 100).toFixed(3);
        }
        const 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],
            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("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.target = [...document.querySelectorAll('#page-skeleton-creator-nxqvy2snps .target')];
        moveable.elementGuidelines = [...document.querySelectorAll('#page-skeleton-creator-nxqvy2snps ._')];
    </script>
</body>

</html>

image

moveable version：v.14.0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>moveable issues 171</title>
    <script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
</head>

<body>
    <style>
        #page-skeleton-creator-nxqvy2snps {
            position: relative;
            overflow: hidden;
            width: 1440px;
            height: 821px;
        }

        @keyframes opacity {
            0% {
                opacity: 1
            }

            50% {
                opacity: .5
            }

            100% {
                opacity: 1
            }
        }

        ._ {
            position: absolute;
            background: #f2f3f5;
        }
    </style>
    <div id='page-skeleton-creator-nxqvy2snps'>
        <div class="_" style="width: 2.222%; height: 3.898%; left: 1.111%; top: 1.949%; border: 1px solid white;"></div>
        <div class="_"
            style="width: 17.847%; height: 3.41%; left: 5%; top: 2.192%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_" style="width: 1.319%; height: 2.436%; left: 23.403%; top: 2.68%; border: 1px solid white;"></div>
        <div class="_" style="width: 5.771%; height: 2.558%; left: 26.389%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 2.845%; height: 2.558%; left: 33.271%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.522%; height: 2.071%; left: 37.228%; top: 2.862%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 3.334%; height: 2.558%; left: 43.861%; top: 2.619%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 0.972%; height: 1.705%; left: 92.329%; top: 1.888%; border: 1px solid white; border-radius: 50%;">
        </div>
        <div class="_" style="width: 0.972%; height: 1.949%; left: 91.912%; top: 2.984%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 93.995%; top: 2.984%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 1.389%; height: 2.436%; left: 96.72%; top: 2.817%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_"
            style="width: 4.431%; height: 2.68%; left: 42.847%; top: 11.084%; border: 1px solid white; border-radius: 3px;">
        </div>
        <div class="_"
            style="width: 5.382%; height: 2.68%; left: 49.362%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.117%; height: 2.68%; left: 56.133%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 4.684%; height: 2.68%; left: 59.333%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.125%; height: 2.68%; left: 65.406%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 3.93%; height: 2.68%; left: 68.614%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.775%; height: 2.68%; left: 73.933%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_"
            style="width: 2.776%; height: 2.68%; left: 77.792%; top: 11.084%; border: 1px solid white; border-radius: 3px 0px 0px 3px;">
        </div>
        <div class="_"
            style="width: 1.377%; height: 2.68%; left: 81.956%; top: 11.084%; border: 1px solid white; border-radius: 0px 3px 3px 0px;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 15.972%; top: 11.328%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 4.985%; height: 2.558%; left: 17.222%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 0.355%; height: 2.558%; left: 22.52%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.394%; height: 2.558%; left: 23.187%; top: 10.962%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 3.632%; height: 3.045%; left: 16.806%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_" style="width: 0.972%; height: 1.949%; left: 22.173%; top: 17.661%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 2.688%; height: 2.071%; left: 23.385%; top: 17.54%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 1.006%; height: 1.462%; left: 26.591%; top: 18.027%; border: 1px solid white; border-radius: 20px;">
        </div>
        <div class="_" style="width: 0.833%; height: 1.949%; left: 29.68%; top: 17.661%; border: 1px solid white;">
        </div>
        <div class="_" style="width: 5.471%; height: 2.071%; left: 30.753%; top: 17.54%; border: 1px solid white;">
        </div>
        <div class="_"
            style="width: 0.533%; height: 1.462%; left: 36.742%; top: 18.027%; border: 1px solid white; border-radius: 20px;">
        </div>
        <div class="_ target"
            style="width: 4.525%; height: 3.045%; left: 39.288%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 6.211%; height: 3.045%; left: 45.48%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 3.294%; height: 3.045%; left: 53.357%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 4.843%; height: 3.045%; left: 58.318%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
        <div class="_ target"
            style="width: 4.803%; height: 3.045%; left: 64.827%; top: 16.931%; border: 1px solid white; border-radius: 3px 3px 0px 0px;">
        </div>
    </div>
    <script>
        // width百分比
        function wPercent(x) {
            return parseFloat(x / window.innerWidth * 100).toFixed(3);
        }
        // height百分比
        function hPercent(x) {
            return parseFloat(x / window.innerHeight * 100).toFixed(3);
        }
        const 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],
            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("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.target = [...document.querySelectorAll('#page-skeleton-creator-nxqvy2snps .target')];
        moveable.elementGuidelines = [...document.querySelectorAll('#page-skeleton-creator-nxqvy2snps ._')];
    </script>
</body>

</html>

image

daybrush commented 4 years ago

@lisiyizu

moveable 0.14.1 is released.

Try it again. Thank you :)

lisiyizu commented 4 years ago

@lisiyizu

moveable 0.14.1 is released.

Try it again. Thank you :)

That's right, Thank you :)