盒子拖动demo

最新推荐文章于 2022-07-16 15:01:08 发布

在知识的海洋里奋力狗刨

最新推荐文章于 2022-07-16 15:01:08 发布

阅读量64

点赞数

分类专栏：测试demo

本文链接：https://blog.csdn.net/nhq2018/article/details/115080214

版权

测试demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

：盒子拖动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>

在知识的海洋里奋力狗刨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子拖动demo

：盒子拖动demo(兼容主流PC端浏览器, 行为基本一致)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #
复制链接

扫一扫