DDR爱好者之家 Design By 杰米
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年05月05日
2024年05月05日
- 鸿雁组合《草原最强音HQ》头版限量[低速原抓WAV+CUE]
- 西彬《完全精神手册》[320K/MP3][77.36MB]
- 西彬《完全精神手册》[FLAC/分轨][202.15MB]
- 群星《今天的她们 电视剧原声带》[320K/MP3][92.29MB]
- 鸿雁组合《草原最强音HQ》头版限量[低速原抓WAV+CUE]
- 潘美辰.1995-原谅我改变(粤)【星光】【WAV+CUE】
- 水木年华.2011-十年·启程2010北京工体演唱会2CD【水木同创】【WAV+CUE】
- 群星《今天的她们 电视剧原声带》[FLAC/分轨][162.95MB]
- 群星《2023-2024南面而歌 新世代台语歌创作专辑》[320K/MP3][99.79MB]
- 邝美云《一期一会 邝美云精选集》[320K/MP3][525.2MB]
- 姜育恒.1997-精华辑(引进版)【开丽创意】【WAV+CUE】
- 张惠妹.2009-阿密特NEWXRCD【金牌大风】【WAV+CUE】
- 戴军.1995-阿莲·新娘【大藏艺术】【WAV+CUE】
- ABC德国制《英国天朗88周年纪念版》6N纯银镀膜[低速原抓WAV+CUE]
- 原音母版1:1直刻《经典粤语老歌》[低速原抓WAV+CUE]