javascript实现拖拽碰撞检测


Posted in Javascript onMarch 12, 2020

本文实例为大家分享了javascript实现拖拽碰撞检测的具体代码,供大家参考,具体内容如下

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

css:

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

html:

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

js:

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

javascript实现拖拽碰撞检测

javascript实现拖拽碰撞检测

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
原生js实现碰撞检测
Mar 12 #Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 #Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 #Javascript
JS实现碰撞检测效果
Mar 12 #Javascript
使用JS实现动态时钟
Mar 12 #Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 #Javascript
js实现动态时钟
Mar 12 #Javascript
You might like
第十三节--对象串行化
2006/11/16 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python中的字典详细介绍
2014/09/18 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python中pika模块问题的深入探究
2018/10/13 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
优秀教师先进事迹
2014/01/22 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
公司节能减排倡议书
2014/05/14 职场文书
工会积极分子个人总结
2015/03/03 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
中学总务处工作总结
2015/08/12 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python