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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
原生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
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
php字符串分割函数用法实例
2015/03/17 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Javascript面向对象编程
2012/03/18 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
python实现输入数字的连续加减方法
2018/06/22 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python中安装django模块的方法
2020/03/12 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
浅析Python 多行匹配模式
2020/07/24 Python
python调用win32接口进行截图的示例
2020/11/11 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
J2EE模式面试题
2016/10/11 面试题
会计电算化学生个人的自我评价
2014/02/08 职场文书
企业趣味活动方案
2014/08/21 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技