检测div的位置

Question

我创建了一个小游戏，其中一些块围绕主div移动。还有一个div的鼠标（我已经将游标的位置指定给该div）。

我只是想追查，光标div是否正在移动块（这些也是div）。如果出现这种情况，那么游戏将结束。

如何检测块或光标div是否相互移动？

Answer 1

如果你使用jQuery，您可以用这些找到一个div的左，上，宽度和高度：

$(myDiv).offset().left 
$(myDiv).offset().top 
myDiv.offsetWidth 
myDiv.offsetHeight 

使用那些制定出的左侧，右侧，顶部和底部每个div。然后两个div相互重叠，如果：

left1 < right2 && left2 < right1 && top1 < bottom2 && top2 < bottom1 

Answer 2

这不是一个简单的任务使用普通的JavaScript，因为你必须追踪div的祖先，并总结相对位置，直到你找到一个绝对定位的div。

另一方面，这个任务对于JavaScript库（如jQuery或Prototype）来说相当简单。例如，在jQuery中，$(myDiv).offset()返回div相对于文档的位置。

如果您还包括jQuery UI，让你的主要的div一个“可拖动”，和所有其他的div“可弃”，所有你需要的是挂钩的Droppable's over event当主格拖过另一个得到通知。

Answer 3

你谈论的是被称为collision detection的概念。

很简单，您需要获取div的边界，然后遍历所有块以查看它们是否重叠。

Answer 4

getBoundingClientRect（）

约翰Resig的在这里有一个伟大的文章：从这里（LGPL代码）getBoundingClientRect is Awesome

Answer 5

如果你不想使用jQuery，您可以复制/粘贴; http://code.google.com/p/ra-ajax/source/browse/trunk/Ra/Js/Ra.js

需要查找的地方是行号为“absolutize”的功能。 220递归地计算while循环中“祖先节点”的大小。

粘贴在这里供参考;

var valueT = this.offsetTop || 0; 
var valueL = this.offsetLeft || 0; 
var el = this.offsetParent; 

while (el) { 
    Ra.extend(el, Ra.Element.prototype); 
    if(el.tagName == 'BODY') { 
    break; 
    } 
    var pos = el.getStyle('position'); 
    if(pos == 'relative' || pos == 'absolute') { 
    break; 
    } 
    valueT += el.offsetTop || 0; 
    valueL += el.offsetLeft || 0; 
    el = el.offsetParent; 
} 

“这个”这里是一个DOM元素...

不过，我怀疑你有什么绝对定位与位置的另一个DIV中的div：相对在这种情况下，你可以使用;

var y = parseInt(myElement.style.top, 10); 
var x = parseInt(myElement.style.left, 10); 

这将是数量级快则做了“偏移循环” ......