碰撞检测

最新推荐文章于 2019-06-03 08:29:47 发布

della_uii

最新推荐文章于 2019-06-03 08:29:47 发布

阅读量311

点赞数

分类专栏： JavaScript 文章标签：碰撞检测

本文链接：https://blog.csdn.net/Della_UI/article/details/53025295

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<body>
    <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute; z-index: 2;"></div>
    <div id="div2" style="width: 100px; height: 100px; background: olivedrab; position: absolute; top: 200px; left: 200px;"></div>
    <script type="text/javascript">
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");

        drag(oDiv1);

        function drag(obj){
            obj.onmousedown=function(ev){
                var ev= ev || event;
                var disX=ev.clientX-this.offsetLeft;  //鼠标距离div上、左边缘的距离
                var disY=ev.clientY-this.offsetTop;

                //设置全局捕获，兼容ie8及以下
                if (obj.setCapture) {
                    obj.setCapture();
                }

                document.onmousemove=function(ev){
                    var ev= ev || event;

                    //计算出oDiv1和oDiv2各边距可视区域上、左边缘的距离。
                    var L1=ev.clientX-disX;
                    var T1=ev.clientY-disY;
                    var R1=L1+oDiv1.offsetWidth;
                    var B1=T1+oDiv1.offsetHeight;

                    var L2=oDiv2.offsetLeft;
                    var T2=oDiv2.offsetTop;
                    var R2=L2+oDiv2.offsetWidth;
                    var B2=L2+oDiv2.offsetHeight;

                    //碰撞检测
                    if (R1>L2 && L1<R2 && B1>T2 && T1<B2) {
                        oDiv2.style.background='saddlebrown';
                    }else{
                        oDiv2.style.background='olivedrab';
                    }

                    //将oDiv1限制在可视区域范围内
                    if (L1<0) {
                        L1=0
                    }else if(L1>document.documentElement.clientWidth-obj.offsetWidth){
                        L1=document.documentElement.clientWidth-obj.offsetWidth;
                    }

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

                    obj.style.left= L1 +'px';
                    obj.style.top= T1 +'px';
                }
                document.onmouseup=function(){
                    document.onmousemove=document.onmouseup=null;
                    //释放全局捕获
                    if (obj.releaseCapture) {
                        obj.releaseCapture();
                    }
                }
                return false;  //图片和选中的文字有拖拽默认行为，这里需要阻止
            }
        }

    </script>
</body>

della_uii

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
碰撞检测

<body> <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute; z-index: 2;"></div> <div id="div2" style="width: 100px; height: 100px; background: olivedrab; p
复制链接

扫一扫