我已经搜索了整个谷歌和这里,但还没有找到一个答案,适合我的问题
(This这是一个非常简单的解释)我有两个div,用户可以移动它们(使用JavaScript和单击事件)我需要检测这两个div是否相互接触/重叠,以及它们是否要触发某个函数,我在这里看到了答案,但它们都使用jQuery,我希望使用纯JS
可能有用的是,这两个div都有绝对位置和css中设置的不同z索引
编辑:由于我的解释非常糟糕,为了澄清问题,两个div中的一个是固定的,第二个只能在Y方向上移动,但在Y方向上移动的div是使用案例动画旋转的
5条答案
按热度按时间des4xlb01#
可能有一个更好的方法(这不是很枯燥),但它应该工作,只需将“div1”和“div2”替换为您的div ID:
ih99xse12#
这与当前的正确答案相似,但我解决这个问题的方法如下。
请注意,此函数不能很好地处理转换。
sshcrbum3#
在两个div上都尝试Element.getBoundingClientRect(),并且使用它们的坐标可以执行collision detection
zpgglvta4#
你可以使用Anand Thangappan的the process described in this post来获得元素的计算位置,然后使用getComputedStyle()(documentation here)来获得计算的宽度和高度,并使用简单的不等式检查来测试它们是否相交。
编辑:或者,你可以直接读取它们的位置值,因为你使用的是绝对位置,然后你可以跳过更复杂的方法来获得元素的计算位置。
hwamh0ep5#
由于您允许用户移动DIV,并且它们都是绝对的,因此您必须能够访问DIV的STYLE属性。
获取top、left、width和height属性。
计算底部和右边的属性。现在你有了所有四个角的坐标。
因为它们都是矩形,所以可以检查dev A的顶部或底部是否在div B的顶部和底部之间,以及dev B的左侧或右侧是否在其左侧和右侧之间。
这样做的一个好处是,您只需要检查A -〉B,因为在两个测试中都可以检测到任何重叠。
这是因为这些形状的直线性,如果它们是三角形或五边形,或者不是凸形,则会更加复杂。
值得注意的是,如果你使用CSS / JS动画,你可能希望在对象高速移动时扩大“碰撞区域”,否则,项目可能会在检查之间通过。