JS實現(xiàn)拖拽元素時與另一元素碰撞檢測
更新時間：2020年08月27日 10:03:12 作者：aiguangyuan
這篇文章主要為大家詳細介紹了JS實現(xiàn)拖拽元素時與另一元素碰撞檢測，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文給大家分享一個用原生JS實現(xiàn)拖拽元素時與另個一元素碰撞檢測的小Demo，效果如下：
實現(xiàn)代碼如下， 歡迎大家復制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現(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');
// 鼠標按下時
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;
// 碰撞檢測的規(guī)則
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文給大家分享的常用腳本有通過數(shù)組，拓展字符串拼接容易導致性能的問題、頁面 視口 滾動條的位置的輔助函數(shù)、調節(jié)元素透明度的函數(shù)、獲取鼠標位置的幾個通用的函數(shù)、使用cssdisplay屬性來切換元素可見性的一組函數(shù)、樣式相關的通用函數(shù)、獲取元素當前的高度和寬度。2015-03-03
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
高山登不上,不是因為體力不支,只因鞋里一粒。學習也是如此，因而有必要把JavaScript中常見的和與其它語言不同的那些細節(jié)學習一下2012-06-06
JavaScript剩余操作符Rest Operator詳解
在本篇文章里小編給各位分享的是關于JavaScript剩余操作符Rest Operator知識點用法總結，有需要的朋友們跟著學習下。2019-07-07
閉包是js中的一大特色，也是一大難點。下面這篇文章主要給大家介紹了關于js中閉包的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起看看吧2018-11-11
這篇文章主要介紹了前端冒泡排序算法的相關資料,冒泡排序是一種簡單的排序算法,通過比較相鄰元素并交換位置,實現(xiàn)元素排序,該算法的時間復雜度為O(n^2),空間復雜度為O(1),具有穩(wěn)定性,適用于小規(guī)模數(shù)據(jù)集和對穩(wěn)定性要求高的場景,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了JS簡單實現(xiàn)禁止訪問某個頁面的方法,涉及基本的頁面跳轉操作技巧,需要的朋友可以參考下2016-09-09
JavaScript如何讓select選擇框可輸入和可下拉選擇
我們知道一般select下拉框是只能選擇的,而有時我們會遇到下拉框中沒有要選擇的信息項或者下拉選項特別多時,需要允許用戶輸入想要的內容,這篇文章主要給大家介紹了關于JavaScript如何讓select選擇框可輸入和可下拉選擇的相關資料,需要的朋友可以參考下2023-10-10
javascript循環(huán)鏈表之約瑟夫環(huán)的實現(xiàn)方法
這是一道比較經(jīng)典的循環(huán)鏈表問題，在華為上機筆試中也出現(xiàn)過。 約瑟夫環(huán)是一個數(shù)學的應用問題，下面這篇文章主要就給大家介紹了javascript循環(huán)鏈表之約瑟夫環(huán)的實現(xiàn)方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
商品屬性和商品規(guī)格是js動態(tài)生成的元素，商品擴展信息的兩個文本框是原有的元素，他們發(fā)生堆疊，下面是一些解決思路2014-09-09