拖拽技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/77149436

拖拽的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽的原理</title>
    <style type="text/css">

        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}

        #div2{width: 100px;height: 100px;background: #ff0;position: absolute;left: 400px;top: 200px;}

    </style>
</head>
<script>

window.onload=function (){


    var oDiv=document.getElementById('div1');


    oDiv.onmousedown=function (ev){

            var ev=ev||event;

            //clientX/clientY  事件发生时，鼠标到可视区的距离
            var disX=ev.clientX-oDiv.offsetLeft;
            var disY=ev.clientY-oDiv.offsetTop;


        document.onmousemove=function (ev){

            var ev=ev||event;

            oDiv.style.left=ev.clientX - disX + 'px';

            oDiv.style.top=ev.clientY - disY + 'px';
        }

        //鼠标抬起事件放在div上，当有一个元素遮挡住div时，鼠标抬起事件就发生在了另一个div上，所以最好是把鼠标抬起事件放在document上
        /*oDiv.onmouseup=function (){

            document.onmousemove=null;

        }*/
        document.onmouseup=function (){

            document.onmousemove=null;
            document.onmouseup=null;

        }
    }
};
</script>
<body>

    <div id="div1"></div>

    <div id="div2"></div>

</body>
</html>

拖拽的问题及解决办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽的问题</title>
    <style type="text/css">

        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}

    </style>
</head>
<script>

/*
    拖拽的问题:

    1.拖拽的时候，如果有文字被选中，会产生问题

    原因:当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字效果

    解决办法:阻止默认行为，但在非标准IE下还是会有问题，需另做处理
*/

window.onload=function (){


    var oDiv=document.getElementById('div1');


    oDiv.onmousedown=function (ev){


            var ev=ev||event;

            var disX=ev.clientX-oDiv.offsetLeft;
            var disY=ev.clientY-oDiv.offsetTop;


        document.onmousemove=function (ev){

            var ev=ev||event;

            oDiv.style.left=ev.clientX - disX + 'px';

            oDiv.style.top=ev.clientY - disY + 'px';

        }
        document.onmouseup=function (){

            document.onmousemove=null;

        }

        return false;
    }
};
</script>
<body>

    文字文字文字文字

    <div id="div1"></div>


</body>
</html>

全局捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局捕获</title>
</head>
<body>
    <input type="button" name="" value="按钮一">

    <input type="button" name="" value="按钮二">

    <script type="text/javascript">

    var aInput=document.getElementsByTagName('input');

    aInput[0].setCapture();//设置全局捕获，当我们给一个元素设置全局捕获后，这个元素就会监听后续发生的所有事件，当有事件发生的时候，就会被设置了全局捕获的那个元素截取，全局捕获是IE的私有属性，在标准浏览器中不支持，但也不会报错

    aInput[0].onclick=function (){


        alert(1);
    }

    aInput[1].onclick=function (){


        alert(2);
    }
    </script>

</body>
</html>

拖拽问题及解决办法2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽的问题</title>
    <style type="text/css">

        #div1{width: 100px;height: 100px;background: #f00;position:absolute;}

    </style>
</head>
<script>

/*
    拖拽的问题:

    1.拖拽的时候，如果有文字被选中，会产生问题

    原因:当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字效果

    解决办法:

        标准：阻止默认行为

        非标准IE：设置全局捕获，不让文字获取onmousemove事件

                  元素.setCapture()   设置全局捕获

                  元素.releaseCapture()   释放全局捕获
 */

window.onload=function (){


    var oDiv=document.getElementById('div1');


    oDiv.onmousedown=function (ev){


            var ev=ev||event;

            var disX=ev.clientX-oDiv.offsetLeft;
            var disY=ev.clientY-oDiv.offsetTop;

        if (oDiv.setCapture){

            oDiv.setCapture();

        }

        document.onmousemove=function (ev){

            var ev=ev||event;

            oDiv.style.left=ev.clientX - disX + 'px';

            oDiv.style.top=ev.clientY - disY + 'px';

            if (oDiv.releaseCapture) {

            oDiv.releaseCapture();

            }
        }
        document.onmouseup=function (){

            document.onmousemove=null;

        }

        return false;
    }
};
</script>
<body>

    文字文字文字文字

    <div id="div1"></div>


</body>
</html>