拖拽效果封装与应用-优快云博客

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

拖拽的封装

<!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;}
        img{width: 200px;height: 200px;position:absolute;left: 100px;height: 100px;}

    </style>
</head>
<script>

window.onload=function (){


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

    var oImg=document.getElementsByTagName('img')[0];

    //调用封装过的函数
    drag(oDiv);
    drag(oImg);

    function drag(obj){

        obj.onmousedown=function (ev){


            var ev=ev||event;

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

            if (obj.setCapture){

                obj.setCapture();

            }

            document.onmousemove=function (ev){

                var ev=ev||event;

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

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

                if (obj.releaseCapture) {

                obj.releaseCapture();

                }


            }

            document.onmouseup=function (){

                document.onmousemove=null;

            }

            return false;
        }
    };

};
</script>
<body>



    <div id="div1"></div>
    <img src="1.jpg">


</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;}
        img{width: 200px;height: 200px;position:absolute;left: 100px;height: 100px;}

    </style>
</head>
<script>

window.onload=function (){


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

    var oImg=document.getElementsByTagName('img')[0];

    //调用封装过的函数
    drag(oDiv);
    drag(oImg);

    function drag(obj){

        obj.onmousedown=function (ev){


            var ev=ev||event;

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

            if (obj.setCapture){

                obj.setCapture();

            }
            document.onmousemove=function (ev){

                var ev=ev||event;

                //限制移动的范围 
                var L=ev.clientX - disX;

                var T=ev.clientY - disY;

                if (L<0) {

                    L=0;
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){

                    L=document.documentElement.clientWidth-obj.offsetWidth;
                }else if(T<0){

                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetHeight){

                    T=document.documentElement.clientHeight-obj.offsetHeight;
                }

                obj.style.left=L + 'px';

                obj.style.top=T + 'px';

                if (obj.releaseCapture) {

                obj.releaseCapture();

                }
            }

            document.onmouseup=function (){

                document.onmousemove=null;

            }
            return false;
        }
    };

};
</script>
<body>



    <div id="div1"></div>
    <img src="1.jpg">


</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;}
        img{width: 200px;height: 200px;position:absolute;left: 100px;height: 100px;}

    </style>
</head>
<script>

window.onload=function (){


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

    var oImg=document.getElementsByTagName('img')[0];

    //调用封装过的函数
    drag(oDiv);
    drag(oImg);

    function drag(obj){

        obj.onmousedown=function (ev){


            var ev=ev||event;

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

            if (obj.setCapture){

                obj.setCapture();

            }

            document.onmousemove=function (ev){

                var ev=ev||event;

                //限制移动的范围 
                var L=ev.clientX - disX;

                var T=ev.clientY - disY;

                if (L<100) {

                    L=0;//实现磁性吸附
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){

                    L=document.documentElement.clientWidth-obj.offsetWidth;
                }else if(T<0){

                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetHeight){

                    T=document.documentElement.clientHeight-obj.offsetHeight;
                }

                obj.style.left=L + 'px';

                obj.style.top=T + 'px';

                if (obj.releaseCapture) {

                obj.releaseCapture();

                }
            }

            document.onmouseup=function (){

                document.onmousemove=null;

            }
            return false;
        }
    };

};
</script>
<body>



    <div id="div1"></div>
    <img src="1.jpg">


</body>
</html>

碰撞检测

这里写图片描述

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

        #div1{width: 50px;height: 50px;background: #f00;position:absolute;}
        img{width: 400px;height: 400px;position:absolute;left: 525px;top: 92px;}

    </style>
</head>
<script>

window.onload=function (){

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

    var oImg=document.getElementsByTagName('img')[0];

    //调用封装过的函数
    drag(oDiv);
    // drag(oImg);

    function drag(obj){

        obj.onmousedown=function (ev){


            var ev=ev||event;

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

            if (obj.setCapture){

                obj.setCapture();

            }

            document.onmousemove=function (ev){

                var ev=ev||event;

                //限制移动的范围 
                var L=ev.clientX - disX;

                var T=ev.clientY - disY;

                //碰撞检测原理，把页面化分为九宫格，检测两个元素是否重叠
                var L1=obj.offsetLeft;
                var R1=L1+obj.clientWidth;
                var T1=obj.offsetTop;
                var B1=T1+obj.clientHeight;

                var L2=oImg.offsetLeft;
                var R2=L2+oImg.clientWidth;
                var T2=oImg.offsetTop;
                var B2=T2+oImg.clientHeight;

                if (R1<L2 || L1>R2 || B1<T2 || T1>B2) {

                    oImg.src='1.jpg';

                }else{

                    oImg.src='2.jpg';
                }

                if (L<100) {

                    L=0;//实现磁性吸附
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){

                    L=document.documentElement.clientWidth-obj.offsetWidth;
                }else if(T<0){

                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetHeight){

                    T=document.documentElement.clientHeight-obj.offsetHeight;
                }

                obj.style.left=L + 'px';

                obj.style.top=T + 'px';

                if (obj.releaseCapture) {

                obj.releaseCapture();

                }
            }

            document.onmouseup=function (){

                document.onmousemove=null;

            }
            return false;
        }
    };

};
</script>
<body>



    <div id="div1"></div>
    <img src="1.jpg">


</body>
</html>