前端盒子拖拽

关忆北_

已于 2024-10-09 14:43:58 修改

阅读量147

点赞数

分类专栏：封装文章标签：前端 javascript 开发语言

于 2024-10-09 13:28:15 首次发布

本文链接：https://blog.csdn.net/notagoodwriter/article/details/142784493

版权

封装专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background: #000;
            cursor: pointer;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="one" id="drag">
    </div>

    <script>
        // 拖拽
        let drag = document.getElementById('drag');
        function boxDrag(ele) {
            let x = 0;
            let y = 0;
            ele.onmousedown = (e) => {
                let disX = e.clientX - ele.offsetLeft;
                let disY = e.clientY - ele.offsetTop;
                document.onmousemove = (e) => {
                    x = e.clientX - disX;
                    y = e.clientY - disY;
                    ele.style.left = x + 'px';
                    ele.style.top = y + 'px';
                }
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
        boxDrag(drag)
    </script>
</body>

</html>