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 相关文章推荐
浅析js中的浮点型运算问题
Jan 06 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
js实现多图左右切换功能
Aug 04 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 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
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
浅谈vue父子组件怎么传值
2018/07/21 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python使用剪切板的方法
2017/06/06 Python
python实现手机通讯录搜索功能
2018/02/22 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
上海中网科技笔试题
2012/02/19 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
精细化工应届生求职信
2013/11/17 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2014年招生工作总结
2014/11/26 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android