JS实现拖拽元素时与另一元素碰撞检测


Posted in Javascript onAugust 27, 2020

本文给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo,效果如下:

JS实现拖拽元素时与另一元素碰撞检测

实现代码如下, 欢迎大家复制粘贴。

<!DOCTYPE html>
<html>
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>原生JS实现拖拽元素时与另个一元素碰撞检测</title>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      z-index: 2;
    }
 
    #div2 {
      width: 100px;
      height: 100px;
      background: yellow;
      position: absolute;
      left: 230px;
      top: 220px;
      z-index: 1;
    }
  </style>
  <script>
    window.onload = function () {
      var oDiv = document.getElementById('div1');
      var oDiv2 = document.getElementById('div2');
      // 鼠标按下时
      oDiv.onmousedown = function (ev) {
 
        var oEvent = ev || event;
        var disX = oEvent.clientX - oDiv.offsetLeft;
        var disY = oEvent.clientY - oDiv.offsetTop;
        // 鼠标移动时
        document.onmousemove = function (ev) {
 
          var oEvent = ev || event;
 
          oDiv.style.left = oEvent.clientX - disX + 'px';
          oDiv.style.top = oEvent.clientY - disY + 'px';
 
          var l1 = oDiv.offsetLeft;
          var r1 = oDiv.offsetLeft + oDiv.offsetWidth;
          var t1 = oDiv.offsetTop;
          var b1 = oDiv.offsetTop + oDiv.offsetHeight;
 
          var l2 = oDiv2.offsetLeft;
          var r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
          var t2 = oDiv2.offsetTop;
          var b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
 
          // 碰撞检测的规则
          if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
            // 如果没有碰到
            oDiv2.style.background = 'yellow';
 
          } else {
            // 如果碰到了
            oDiv2.style.background = 'green';
          }
        };
        // 鼠标抬起时
        document.onmouseup = function () {
 
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    };
  </script>
</head>
 
<body>
  <div id="div1"></div>
  <div id="div2"></div>
</body>
 
</html>

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

Javascript 相关文章推荐
javascript学习之闭包分析
Dec 02 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
js date 格式化
Feb 15 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 #Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 #Javascript
javascript操作向表格中动态加载数据
Aug 27 #Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 #Javascript
js实现批量删除功能
Aug 27 #Javascript
js利用拖放实现添加删除
Aug 27 #Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
You might like
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
pymysql的简单封装代码实例
2020/01/08 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
《月球之谜》教学反思
2014/04/10 职场文书
个人整改方案范文
2014/10/25 职场文书
2014年电教工作总结
2014/12/19 职场文书
教学副校长工作总结
2015/08/13 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js