问：谁能给我这个主意。如何检测2 dom元素之间的冲突。我有此代码形式MDN。但不能彻底解决。请帮我。var rect1 = {x：5，y：5，宽度：50，高度：50} var rect2 = {x：20，y：10，宽度：10，高度：10}如果（rect1.x <rect2.x + rect2.width && rect1.x + rect1.width> rect2.x && rect1.y <rect2.y + rect2.height && rect1.height + rect1.y> rect2.y）{//检测到冲突！} //填写值=> if（5 <30 && 55> 20 && 5 <20 && 55> 10）{//检测到碰撞！}
答：嗨，我为您制作了一个简化的示例。我通过使用jQuery拖动效果来构建碰撞功能。请通过下面的代码。
<！DOCTYPE html PUBLIC“-// W3C // DTD XHTML 1.0 Transitional // EN”“ http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<头>
<meta http-equiv =“ Content-Type” content =“ text / html; charset = utf-8” />
<title>元素碰撞测试</ title>
<script src =“ https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”> </ script>
<script src =“ https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”> </ script>
<script type =“ text / javascript”>
$（document）.ready（function（e）{
$（'。elem2'）。draggable（{
//启动拖动功能
拖动：function（）{
//元素1的属性
var elem1X = $（'。elem1'）。offset（）。left;
var elem1Y = $（'。elem1'）。offset（）。top;
var elem1Width = $（'。elem1'）。width（）;
var elem1Height = $（'。elem1'）。height（）;
//元素2的属性
var elem2X = $（'。elem2'）。offset（）。left;
var elem2Y = $（'。elem2'）。offset（）。top;
var elem2Width = $（'。elem2'）。width（）;
var elem2Height = $（'。elem2'）。height（）;
如果（elem1X <elem2X + elem2Width && elem1X + elem1Width> elem2X &&
elem1Y <elem2Y + elem2Height && elem1Height + elem1Y> elem2Y）{
console.log（“ Elem 2 Div Collides”）;
$（this）.css（'background-color'，'yellow'）;
}其他{
$（this）.css（'background-color'，'blue'）;
}
} //结束拖动功能//
}）;
}）; //文档就绪功能结束//
</ script>
<style type =“ text / css”>
.elements {位置：绝对；}
.elem1 {
宽度：50px;
高度：50px;
背景：红色；
top：5px;
左：5px;
}
.elem2 {
宽度：60px;
高度：40px；
背景：蓝色；
最高：60px;
左：60px;
}
</ style>
</ head>
<身体>
<div style =“ width：80％; margin：0 auto; padding：5px 5px; border：2px solid＃a9a9a9; position：relative;”>
<div id =“ cr-stage” style =“ height：400px;”>
<div class =“ elem1 elements”> </ div>
<div class =“ elem2 elements”> </ div>
</ div>
<p>拖动第二个矩形。黄色背景表示碰撞，蓝色表示没有碰撞。</ p>
</ div>
</ body>
</ html>
使用此代码，希望对您有所帮助：）
