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