jS实现兼容的div拖放功能

最新推荐文章于 2025-06-20 08:41:11 发布

原创最新推荐文章于 2025-06-20 08:41:11 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #浏览器兼容 #面试

web前端同时被 2 个专栏收录

98 篇文章

订阅专栏

javascript

58 篇文章

订阅专栏

本文介绍了一个兼容IE6及以上、Chrome和Firefox等浏览器的拖拽功能实现方案。通过HTML、CSS和JavaScript实现了对页面内正方形元素的拖拽与放下，并详细解释了不同浏览器间事件对象的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天腾讯共享桌面面试，出了一道题：

页面内有一个正方形元素，实现对其拖拽和放下。要求兼容IE8及以上/Firefox/Chrome。

由于当时在学习浏览器兼容性方面并没有留意，所以现在补充实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tmp.html</title>
    <style>
        .content {
            background-color: #bfbfbf;
            height: 500px;
        }
        .obj {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            /*margin: 10 auto;*/
            border: 1px solid green;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content" id="obja"></div>
        <div class="obj" id="objb"></div>
        <p id="para"></p>
    </div>
    <script>
        var flag = false;
        var sx, sy, cx, cy, dx, dy;
        var obj = document.getElementById("objb");
        if(obj.addEventListener) {
            obj.addEventListener('mousedown', function(event) {dragStart(event);}, false);
            obj.addEventListener('mousemove', function(event) {dragMove(event);}, false);
            document.body.addEventListener('mouseup', function(event) {dragEnd(event);}, false);
        }
        else if(obj.attachEvent){
            obj.attachEvent('onmousedown', function(event) {dragStart(event);});
            obj.attachEvent('onmousemove', function(event) {dragMove(event);});
            document.body.attachEvent('onmouseup', function(event) {dragEnd(event);});
        } else {
            obj['onmousedown'] = function(event) {dragStart(event);}
            obj['onmousemove'] = function(event) {dragMove(event);}
            obj['onmouseup'] = function(event) {dragEnd(event);}
        }

        //获取对象
        function getEvent(event) {
            if(event.touches) {
                return event.touches[0];
            } else if(window.event) {
                return window.event;
            } else {
                return event;
            }
        }

        function dragStart(event) {
            flag =true;
            sx = event.clientX;
            sy = event.clientY;
            dx = obj.offsetLeft;
            dy = obj.offsetTop;
        }
        function dragMove(event) {
            if(flag) {
                cx = event.clientX;
                cy = event.clientY;
                obj.style.left = cx - sx + dx + 'px';
                obj.style.top = cy - sy + dy + 'px';
                if(event.preventDefault) {
                    document.addEventListener("mousemove", function(){
                        event.preventDefault();                     
                    }, false);
                } else {
                    document.attachEvent("onmousemove", function(){
                        window.event.returnValue = false;
                    });
                }
            }

        }
        function dragEnd(event) {
            flag = false;
        }
    </script>
</body>
</html>

通过测试，该实现可以兼容IE6/7/8、Chrome和Firefox；
需要注意的是：在IE/Chrome/Firefox中事件对象的使用是有区别的，在IE和Opera中使用window.event，在Chrome和Firefox中使用的是event；另外，测试时发现，Firefox中的函数使用event时必须把event作为函数参数才能被函数内部正确调用，否则会报错；补充：获取事件对象的差异性，Chrome/Firefox使用event.target；而IE中IE6/7/8使用window.event.srcElement，而IE9/10/Edge使用的也是event.target。

当然，可以进行函数封装，看起来逻辑会更加清晰。。。