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 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 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
用PHP实现维护文件代码
2007/06/14 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php session的锁和并发
2016/01/22 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
浅析python协程相关概念
2018/01/20 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python标准库os库的函数介绍
2020/02/12 Python
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
成考报名单位证明范本
2014/01/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
五一手机促销方案
2014/03/08 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
商务经理岗位职责
2014/08/03 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python