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变量作用域及可访问性的探讨
Nov 23 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 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
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
详解Document.Cookie
2015/12/25 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python中的匿名函数使用简介
2015/04/27 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python模块导入的方法
2019/10/24 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
销售会计工作职责
2013/12/02 职场文书
一年级家长会邀请函
2014/01/25 职场文书
寄语学生的话
2014/04/10 职场文书
销售员岗位职责
2015/02/10 职场文书
实习单位推荐信
2015/03/27 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
python之基数排序的实现
2021/07/26 Python