JS實(shí)現(xiàn)拖拽元素時與另一元素碰撞檢測
更新時間：2020年08月27日 10:03:12 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖拽元素時與另一元素碰撞檢測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文給大家分享一個用原生JS實(shí)現(xiàn)拖拽元素時與另個一元素碰撞檢測的小Demo，效果如下：
實(shí)現(xiàn)代碼如下， 歡迎大家復(fù)制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實(shí)現(xiàn)拖拽元素時與另個一元素碰撞檢測</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');
// 鼠標(biāo)按下時
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
// 鼠標(biāo)移動時
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;
// 碰撞檢測的規(guī)則
if (r1 < l2 || l1 > r2 || b1 < t2 || t1 > b2) {
// 如果沒有碰到
oDiv2.style.background = 'yellow';
} else {
// 如果碰到了
oDiv2.style.background = 'green';
}
};
// 鼠標(biāo)抬起時
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript中for...of和for..in循環(huán)的區(qū)別
JS中循環(huán)語句眾多，你是否也有用的時候突然不知道用哪個的經(jīng)歷，本文主要介紹了javascript中for...of和for..in循環(huán)的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了JavaScript 數(shù)組遍歷的五種方法，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了antd?table長表格如何出現(xiàn)滾動條,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了對javaScript原型鏈的理解,以實(shí)例形式對javaScript原型鏈的概念及相關(guān)使用技巧做了較為淺顯易懂的分析,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄猨s排序與重組的實(shí)例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）
這篇文章主要介紹了JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）,需要的朋友可以參考下2018-10-10
PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈現(xiàn)PDF文件,它支持內(nèi)容檢索、頁面跳轉(zhuǎn)、文件打印等功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關(guān)于js兩個數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的點(diǎn)擊按鈕 彈出底部上拉菜單功能,結(jié)合實(shí)例形式分析了action-sheet組件及事件響應(yīng)簡單使用技巧,需要的朋友可以參考下2018-12-12
用js獲取頁面值得仿佛，需要的朋友可以參考下。2011-11-11