Moveable.js拖动Demo

最新推荐文章于 2025-06-04 09:02:37 发布

小老豆丶

最新推荐文章于 2025-06-04 09:02:37 发布

阅读量252

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/d915273453/article/details/144239803

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

<head>
    <meta charset="UTF-8">
    <title>Moveable.js拖动Demo</title>
    <!-- 引入Moveable.js库 -->
    <script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
    <style>
        /* 为目标元素设置样式 */
       .targetElement {
            width: 150px;
            height: 150px;
            background-color: skyblue;
            position: relative;
            cursor: pointer;
        }

        /* 为Moveable.js的操作手柄设置样式（可选） */
       .moveable-handle {
            background-color: rgba(0, 0, 0, 0.5);
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="targetElement"></div>
    <div class="targetElement"></div>
    <div class="targetElement"></div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let targets = [...document.getElementsByClassName('targetElement')];
            let mouseEvent = null;
            // 创建Moveable实例
            const moveable = new Moveable(document.body, {
                // target: target1,
                container: document.body,
                // 启用可拖动功能
                draggable: true,
                // 启用可缩放功能
                scalable: true,
                // 启用可旋转功能
                rotatable: true,
                // 设置缩放限制（可选）
                scaleRange: {
                    min: 0.5,
                    max: 2
                },
                origin: false, // 隐藏原点
                // 设置旋转限制（可选）
                rotateRange: {
                    min: 0,
                    max: 360
                },
            });
            targets.forEach(item => {
                item.addEventListener('mousedown', (e) => {
                    mouseEvent = e;
                    moveable.setState({ target: e.target }, () => {
                        // 当出现mouseevent时进行即刻选中
                        moveable.dragStart(mouseEvent);
                        mouseEvent = null;
                    });
                });
            });
            // 监听拖动事件
            moveable
            .on('dragStart', ({ inputEvent, target, stop }) => {
            })
            .on('drag', function ({ target, left, top }) {
                console.log('正在拖动，当前位置：', left, top);
                target.style.left = `${left}px`;
                target.style.top = `${top}px`;
            })
            .on('scale', function ({ target, scale, transform }) {
                target.style.transform = transform
                console.log('正在缩放，当前缩放比例：', scale);
                console.log('正在缩放，当前缩放比例：', transform);
            })
            .on('rotate', function ({ target, rotation }) {
                console.log('正在旋转，当前旋转角度：', rotation);
                target.style.transform = `rotate(${rotation}deg)`;
            });
        });
    </script>
</body>

</html>

事件绑定可改为事件委托，可在moveable各个事件中保存target修改后的值去保存。