js拖拽--超丝滑

最新推荐文章于 2024-06-14 11:01:38 发布

小桥流水人家丶

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量104

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/xu568110526/article/details/135852188

版权

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: purple;
            /* 开启定位才能移动 !!!!!!!!!!*/
            position: absolute;
            right: 20px;
            top: 20px;
        }

        #parentContainer {
            position: relative;
            width: 500px;
            /* Set the width of the parent container */
            height: 500px;
            /* Set the height of the parent container */
            border: 1px solid black;
            /* Just for visualization, you can remove this */
        }
    </style>
    <script>
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var parentContainer = document.getElementById("parentContainer");

            // 鼠标按下函数
            box1.onmousedown = function (event) {
                event = event || window.event;

                // 调整鼠标和div的位置问题
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;

                // 鼠标移动函数
                document.onmousemove = function (event) {
                    event = event || window.event;
                    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

                    var left = event.clientX + scrollLeft - ol;
                    var top = event.clientY + scrollTop - ot;

                    // Calculate the maximum allowable position based on parent container dimensions
                    var maxLeft = parentContainer.clientWidth - box1.clientWidth;
                    var maxTop = parentContainer.clientHeight - box1.clientHeight;

                    // Ensure the box stays within the bounds of the parent container
                    left = Math.min(Math.max(left, 0), maxLeft);
                    top = Math.min(Math.max(top, 0), maxTop);

                    // Set box1's position
                    box1.style.left = left + "px";
                    box1.style.top = top + "px";
                };

                // 鼠标松开
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        };
    </script>
</head>

<body>
    <div id="parentContainer">
        <div id="box1"></div>
    </div>
</body>

</html>