js 模仿桌面拖拽功能

最新推荐文章于 2023-07-26 17:33:34 发布

autm许

最新推荐文章于 2023-07-26 17:33:34 发布

阅读量584

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/qq_17108919/article/details/116004837

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

26 篇文章 2 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js 模仿桌面拖拽功能</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #boxs {
            position: absolute;
            height: 800px;
            width: 800px;
            display: flex;
            box-sizing: border-box;
            background: #f8f8f8;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        #boxs .item {
            width: 80px;
            height: 80px;
            position: absolute;
            border-radius: 10px;
            overflow: hidden;
            left: 20px;
        }

        #boxs .item:nth-child(1) {
            background: darkgoldenrod;
            top: 10px;
        }

        #boxs .item:nth-child(2) {
            background: darksalmon;
            top: 100px;
        }

        #boxs .item:nth-child(3) {
            background: dodgerblue;
            top: 190px;
        }

        #boxs .item:nth-child(4) {
            background: darkgreen;
            top: 280px;
        }

        #boxs .item:nth-child(5) {
            background: darkred;
            top: 370px;
        }

        #boxs .item:nth-child(6) {
            background: olive;
            top: 460px;
        }
    </style>
</head>

<body>
    <div id="boxs">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        window.onload = function () {
            // 获取共同祖先元素
            var boxs = document.getElementById('boxs');
            // 获取共同祖先元素宽高
            var bw = boxs.clientWidth;
            var bh = boxs.clientHeight;
            // 在共同祖先元素下委托事件
            boxs.onmousedown = function (event) {
                event = event || window.event;
                // 获取当前元素
                var el = event.target
                if (event.target.className === 'item') {
                    // 获取鼠标与当前元素的xy位移偏差
                    var dl = event.clientX - el.offsetLeft;
                    var dt = event.clientY - el.offsetTop;
                    // 获取当前元素的宽高
                    var ew = el.offsetWidth;
                    var eh = el.offsetHeight;
                    // 鼠标拖动事件
                    document.onmousemove = function (event) {
                        event = event || window.event;
                        // 获取当前鼠标位置的xy
                        var cx = event.clientX;
                        var cy = event.clientY;
                        // 当前元素的鼠标位置 = 鼠标位置 - 位移偏差
                        var x = cx - dl;
                        var y = cy - dt;
                        // 判断x方向 如果小于0
                        if (cx - dl < 0) {
                            x = 0
                        }
                        // 判断x方向 如果大于最大边界
                        if (bw - (cx + (ew - dl)) < 0) {
                            x = bw - ew
                        }
                        // 判断y方向 如果小于0
                        if (cy - dt < 0) {
                            y = 0
                        }
                        // 判断y方向 如果大于最大边界
                        if (bh - (cy + (eh - dt)) < 0) {
                            y = bh - eh
                        }
                        el.style.left = x + 'px'
                        el.style.top = y + 'px'
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null
                    }
                }
                return false
            }
        }
    </script>
</body>

</html>

autm许

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 模仿桌面拖拽功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫