事件深入应用二

来源：互联网发布：java项目流程怎么说编辑：程序博客网时间：2024/06/05 20:11

拖拽的封装

<!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>

阅读全文

0 0