盒子拖动demo

网页元素拖动实现与浏览器兼容性处理

最新推荐文章于 2025-01-09 17:33:29 发布

原创最新推荐文章于 2025-01-09 17:33:29 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

测试demo 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现一个在主流PC端浏览器中兼容的盒子拖动示例。通过设置CSS样式禁止用户选择，以及利用事件处理函数监听鼠标按下、移动和抬起事件，实现元素的拖放功能。同时，针对Firefox浏览器的行为差异进行了特殊处理，确保了在不同浏览器中的行为一致性。

：盒子拖动demo(兼容主流PC端浏览器, 行为基本一致)

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
            /* 禁止用户选择, 否则拖动时,当鼠标的位置脱离文档区域会有不好的体验 */
            /* 在ie9及以下, 不支持这个user-select https://caniuse.com/?search=user-select */
            /* IE9或者之前的版本 对不可被选中的元素添加属性unselectable="on" */
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    </style>
    <script>
        function getClient() {
            return {
                clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
                clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
            }
        }

        function getPage(e) {
            e = e || window.event;
            return {
                pageX: e.pageX || e.clientX + document.documentElement.scrollLeft || 0,
                pageY: e.pageY || e.clientY + document.documentElement.scrollTop || 0
            }
        }

        // 以下代码, 在chrome, ie(包括ie5), firefox, opera, edge中都可以正常运行
        window.onload = function () {
            var box = document.getElementById('box');
            var userAgent = window.navigator.userAgent;

            // 解决火狐浏览器下, 事件行为与其他浏览器不一致的现象
            var mytarget = null;
            if (userAgent.indexOf('Firefox') !== -1) {
                mytarget = window;
            } else {
                mytarget = document.documentElement;
            }

            box.onmousedown = function () {
                // 获得鼠标在盒子中的位置距离
                var pointX = getPage().pageX - box.offsetLeft;
                var pointY = getPage().pageY - box.offsetTop;

                mytarget.onmousemove = function () {
                    var pageX = getPage().pageX - pointX;
                    var pageY = getPage().pageY - pointY;

                    // 限制区域位移
                    pageX = pageX < 0 ? 0 : pageX;
                    pageY = pageY < 0 ? 0 : pageY;
                    pageX = pageX > (getClient().clientWidth - box.offsetWidth) ? (getClient().clientWidth - box.offsetWidth) : pageX;
                    pageY = pageY > (getClient().clientHeight - box.offsetHeight) ? (getClient().clientHeight - box.offsetHeight) : pageY;

                    // 将得到的位置赋值给box
                    box.style.left = pageX + 'px';
                    box.style.top = pageY + 'px';
                }
            }

            mytarget.onmouseup = function () {
                mytarget.onmousemove = null;
            }
        }
    </script>
</head>

<body>
    <div id="box" unselectable="on">测试盒子</div>
</body>

</html>