javascript拖拽碰撞检测

野性酷女 2022-01-26 14:29 299阅读 0赞

## 拖拽碰撞检测碰撞改变颜色 ##

<style>
            .div1{width: 100px;height: 100px;background: pink;position: absolute;}
            .div2{
            	width: 150px;height: 150px;background: gray;position: absolute;
            	top: 35%;
            	left: 35%;
            }
        </style>

<body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>

<script>
            window.onload = function () {
                var oDiv = document.getElementsByTagName("div")[0];
                var oDiv2 = document.getElementsByTagName("div")[1];
                
                //1.按下 拖动
                oDiv.onmousedown = function (ev) {
                    var oEvent = window.event || ev;
                    //5.计算需要往回移动的距离
                    //鼠标与盒子的左相对距离
                    var l = oEvent.clientX - oDiv.offsetLeft;
                    //鼠标与盒子的上相对距离
                    var t = oEvent.clientY - oDiv.offsetTop;
    
                    document.onmousemove = function (ev) {
                        var oEvent = window.event || ev;
    					//oEvent.preventDefault();
                        //2.获取鼠标坐标位置
                        var x = oEvent.clientX;
                        var y = oEvent.clientY;
                        
                        //div的坐标位置
                        var x1 = x - l;
                        var y1 =  y - t;
                        
                        //div2的真实宽度
                        var oDiv2Width = oDiv2.offsetWidth;
                        //div2的X坐标
                        var oDiv2Left = oDiv2.offsetLeft;
                        //第一个左边的临界值
                        var div1L = x1 + oDiv.offsetWidth;
                        //第二个左边的临界值
                        var div1L2 = oDiv2Width + oDiv2Left;
                        //左边的两个临界值的判断
                        //第一个上面的临界值
                        var div1Top = y1 + oDiv.offsetHeight;
                        //第二上面的临界值
                        var div1Top2 = oDiv2.offsetTop + oDiv2.offsetHeight;
                        
                        
                        
                        if(div1L>=oDiv2Left && x1 <= div1L2  && div1Top>=oDiv2.offsetTop && y1 <=div1Top2){
                        	oDiv2.style.backgroundColor = 'yellow';
                        }else{
                        	oDiv2.style.backgroundColor = 'gray';
                        }
                        
                        
                        
    
    
                        //3.设置div的位置
                        oDiv.style.left = x1 + "px";
                        oDiv.style.top = y1 + "px";
                        //增加一个全局捕获事件
                        //这个全局捕获事件  是兼容低版本的ie浏览器的
                        if(oDiv.setCapture){
                        	oDiv.setCapture();
                        }
                        return false;
                        //这个return false不在ie浏览器下生效
                    }    
                }
    
                oDiv.onmouseup = function () {
                    //4.取消掉移动事件
                    //当我们抬起鼠标的时候 就应该释放全局捕获事件
                    if(oDiv.releaseCapture){
                    	oDiv.releaseCapture()
                    }
                    document.onmousemove = null;
                }
    
            }
        </script>

![在这里插入图片描述][20190529113717774.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[20190529113717774.png]: /images/20220126/8dabe2dc8334472abefb9e686235b2a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220126/d781aa87db1a4d579eee4dc17177e882.png

发表评论取消回复

表情：

评论列表（有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

相关拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 338 阅读

相关如何用JavaScript代码编写拖拽

拖拽，顾名思义拖着一块区域进行移动。比如拖着文件上传，拖动整个qq等。下面呢，小编编写两个极为简单的代码。首先呢写个简单易懂但有点复杂的，编写一个class.box，背

深碍√TFBOYSˉ_/ 2022年06月07日 01:38/ 0 赞/ 194 阅读

相关原生JavaScript实现div拖拽效果

实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mo

分手后的思念是犯贱/ 2022年05月24日 03:43/ 0 赞/ 392 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 329 阅读

相关 javascript之div的拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

叁歲伎倆/ 2022年04月18日 05:11/ 0 赞/ 265 阅读

相关 javascript拖拽碰撞检测

拖拽碰撞检测碰撞改变颜色 <style> .div1{width: 100px;height: 100px;background: pin

野性酷女/ 2022年01月26日 14:29/ 0 赞/ 300 阅读

相关 javascript 完美拖拽

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年11月11日 04:32/ 0 赞/ 393 阅读

相关 javascript拖拽之从浏览器外拖拽（drag）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2021年11月01日 05:40/ 0 赞/ 589 阅读

相关 canvas画布实现拖拽碰撞 canvas之isPointInPath解析

isPointInPath():判断指定的坐标点是否在canvas绘制的路径中,如果在返回true,如果不在返回false,只能判断最后一个绘制的封闭路径注意:stroke

怼烎@/ 2021年09月16日 05:00/ 0 赞/ 697 阅读

相关 javascript元素拖拽效果的实现

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup 注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖

Dear 丶/ 2021年07月26日 15:38/ 0 赞/ 513 阅读