jS实现兼容的div拖放功能

前几天腾讯共享桌面面试,出了一道题:

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tmp.htmltitle>
    <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。

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


你可能感兴趣的:(javascript,web前端)