檢測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); 

這將是數量級快則做了「偏移循環」 ......