js实现简单的拖拽功能（解决IE浏览器兼容问题）

SKMA

于 2022-09-19 20:24:47 发布

阅读量536

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Sk22582/article/details/126941165

版权

如何实现元素的拖拽效果，而且可以解决兼容问题，并且实现不溢出文档呢？一起看看吧。

样式部分代码

<!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>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: palevioletred;
            
            /* 元素需要定位，并设置初始位置 */
            position: absolute;   
            left: 20px;
            top:20px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

js部分代码

    <script type="text/javascript">
        /*
        拖拽共分为三个状态
            1.鼠标按下    mousedown
            2.鼠标移动    mousemove    (鼠标移动是在鼠标按下的基础上进行的)
            3.鼠标抬起    mouseup 
        */

        //获取元素
        var div = document.getElementsByTagName("div")[0];

        //绑定事件
        //鼠标按下
        div.onmousedown = function (ev) {
            //事件对象兼容
            ev = ev || window.event;

            //若div中存在文本或图片，文本（选中状态）和图片会被拖拽。属于默认行为
            //阻止默认行为（IE8及以下不属于默认行为，解决不了文字和图片被拖拽问题）
            ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

            //IE独有：将div和鼠标按下事件锁定到一起（按下这一刻只对div生效）
            if (div.setCapture) {
                div.setCapture();
            }

            //获取鼠标到拖拽元素的距离
            var x = ev.offsetX;
            var y = ev.offsetY;

            //鼠标移动过快会脱离元素，但鼠标始终在文档内。所以对document作为对象
            document.onmousemove = function (ev) {
                //事件对象兼容
                ev = ev || window.event;

                //确定位置
                var left = ev.clientX - x;
                var top = ev.clientY - y;

                //鼠标移动至边缘判断
                //水平
                var maxLeft = document.documentElement.clientWidth - div.offsetWidth;
                if (left <= 0) {
                    left = 0;
                } else if (left >= maxLeft) {
                    left = maxLeft;
                }
                //垂直
                var maxTop = document.documentElement.clientHeight - div.offsetHeight;
                if (top <= 0) {
                    top = 0;
                } else if (top >= maxTop) {
                    top = maxTop;
                }

                //设置
                div.style.left = left + 'px';
                div.style.top = top + 'px';
            }
        }

        //鼠标抬起
        document.onmouseup = function () {
            //将鼠标移动事件移除
            document.onmousemove = null;

            //IE独有：将鼠标按下事件和div解除锁定
            if (div.releaseCapture) {
                div.releaseCapture();
            }
        }
    </script>

代码注释已经码好啦，具体实现大概就是这个样子的。