你能用JavaScript判断一个元素是否与另一个元素相接触吗？

我想使用JavaScript检查一个

div

元素（可以拖动）是否与另一个

div

元素接触

下面是一些代码：

<div id="draggable" style="position: absolute;  top: 100px; left: 200px; background-color: red;  width: 100px; height: 100px;"></div>
<div style="background-color: green; width: 100px; height: 100px;"></div>

这能做到吗

如果是，怎么做

---

编辑：我不想使用jQuery，只想使用普通的老JavaScript

更新：我现在意识到，这只考虑了目标元素左上角的交集，因此不能提供完整的解决方案。但我会把它留给子孙后代，以防有人发现它对其他用途有用

---

使用

element.getBoundingClientRect（）和
document.elementFromPoint（）
可以使用
element.getClientBoundingRect（）
（）获取目标（单击、拖动等）元素的位置

暂时隐藏目标元素，然后使用
document.elementFromPoint（x，y）
（）获取该位置最顶端的元素，然后检查其类名以进行比较（如果愿意，可以比较任何属性）

通过此方法实现跨浏览器兼容行为
瑞德：（你不知道
必须使用jQuery来实现此结果。方法可以是
在纯JS中复制。）


附录：

我只展示了检测重叠的功能，而没有展示拖放或拖动移动功能，因为不清楚您要实现哪一个，如果有的话，还有其他答案显示了如何实现各种拖动模式

在任何情况下，您都可以将下面的
detectCollision（）
功能与任何拖动解决方案结合使用



var-box2=document.getElementById（'box2'），
box3=document.getElementById（'box3'）；
box2.onclick=检测碰撞；
box3.onclick=检测碰撞；
功能检测碰撞（e）{
var elem=e.target，
elemOffset=elem.getBoundingClientRect（），
elemDisplay=elem.style.display；
//临时隐藏元素
elem.style.display='none'；
//检查位置处的最顶部元件
var topElem=document.elementFromPoint（elemOffset.left，elemOffset.top）；
//重置元素的初始显示值。
elem.style.display=elemDisplay；
//如果最上面的元素是另一个框
if（toplem.className.match（/box/））{
警报（元素id+“正在触摸”+topElem.id）；
}否则{
警报（elem.id+“未触及其他框”）；
};
}
#框1{
背景色：浅海绿色；
}
#框2{
顶部：25px；
左：-25px；
背景色：桑迪布朗；
}
#框3{
背景色：天蓝色；
}
.盒子{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：100px；
}
.可点击{
光标：指针；
}

更完整的解决方案
下面是对标题为“”的问题中的重叠检测函数的“普通旧JavaScript”重写

两者之间唯一真正的区别是替代了使用jQuery来获取元素位置和宽度以计算边界框

令人惊讶的是，本机JavaScript使用受良好支持的（IE4+）
元素.getBoundingClientRect（）
方法使这项任务变得更容易，该方法返回创建由
getPositions
函数返回的位置矩阵所需的四个值

我为框添加了一个单击处理程序，作为如何使用该函数将目标（单击、拖动等）元素与一组选定元素进行比较的简单演示。然而，我承认jQuery使DOM选择和事件绑定比原生JS容易得多


var-box=document.querySelectorAll（'.box'）；
框。forEach（功能（el）{
如果（el.addEventListener）{
el.addEventListener（'click'，clickHandler）；
}否则{
el.attachEvent（'onclick'，clickHandler）；
}
})
var detectOverlap=（函数（）{
函数getPositions（elem）{
var pos=elem.getBoundingClientRect（）；
返回[[pos.left，pos.right]，[pos.top，pos.bottom]]；
}
功能比较位置（p1、p2）{
变量r1，r2；
if（p1[0]r2[0]| | r1[0]==r2[0]；
}
返回函数（a，b）{
var pos1=获取位置（a），
pos2=getPositions（b）；
返回比较位置（pos1[0]，pos2[0]）&比较位置（pos1[1]，pos2[1]）；
};
})();
函数clickHandler（e）{
var elem=e.target，
elems=document.querySelectorAll（'.box'），
elemList=Array.prototype.slice.call（elems），
内=elemList.indexOf（elem），
触摸=[]；
如果（在！=-1范围内）{
电子列表拼接（内，1）；
}
对于（变量i=0；i

#框1{
背景色：浅海绿色；
}
#框2{
顶部：25px；
左：-25px；
背景色：桑迪布朗；
}
#框3{
左：-50px；
背景色：天蓝色；
}
#方框4{
背景色：石板灰；
}
.盒子{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：100px；
颜色：白色；
字体：粗体72px无衬线；
线高：100px；
文本对齐：居中；
光标：指针；
}
.box:悬停{
颜色：黑色；
}
单击一个框，查看检测到哪些其他框与之接触。

如果没有警报拨号