確定一個節點是否與另一個節點重疊

是否有可能在jQuery中知道節點是否與另一個節點重疊？確定一個節點是否與另一個節點重疊

2011-12-19 MyBoon

定義'above'和'below'與問候到DOM？ – 2011-12-19 21:58:51

在David Thomas的問題之上，你如何選擇節點？ – Jasper 2011-12-19 22:00:15

是的，絕對定義'above'和'below'，因爲你有三個不同的答案，基於'above''和''below'''三個不同的含義...... – redShadow 2011-12-19 22:06:29

那麼，你想檢測重疊？然後這樣的：

var overlaps = (function() { 
    function getPositions(elem) { 
     var pos, width, height; 
     pos = $(elem).position(); 
     width = $(elem).width(); 
     height = $(elem).height(); 
     return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ]; 
    } 

    function comparePositions(p1, p2) { 
     var r1, r2; 
     r1 = p1[0] < p2[0] ? p1 : p2; 
     r2 = p1[0] < p2[0] ? p2 : p1; 
     return r1[1] > r2[0] || r1[0] === r2[0]; 
    } 

    return function (a, b) { 
     var pos1 = getPositions(a), 
      pos2 = getPositions(b); 
     return comparePositions(pos1[0], pos2[0]) && 
       comparePositions(pos1[1], pos2[1]); 
    }; 
})();

用法：

if (overlaps(node1, node2)) { 
    // ... 
}

現場演示：http://jsfiddle.net/98sAG/

來源

2011-12-19 22:25:58

'offset（）'更有效一些。 – 2011-12-19 22:27:02

@JohnFable它是？ – 2011-12-19 22:27:54

非常感謝！ – MyBoon 2011-12-19 22:38:50

使用.offset()尋找它在屏幕上的位置：

http://api.jquery.com/offset/

隨着offset();，你將能夠得到一個Y座標稱爲top，這將是它的像素位置，從窗口的頂部。

var boxOne = $('#boxOne').offset(): 
var boxTwo = $('#boxTwo').offset(): 

if(boxOne.top>boxTwo.top) { 
    alert('boxOne is higher'); 
} else if (boxOne.top==boxTwo.top) { 
    alert('boxes are even'); 
} else { 
    alert('boxTwo is higher'); 
}

來源

2011-12-19 22:01:02

OP希望檢測[overlapping]（http://data.imagup.com/11/1138998080.png），而不是文檔中哪個節點更高。 – 2011-12-19 22:29:50

在jQuery中有一個函數.index（），它可以做你正在尋找的我猜。下面是該頁面的鏈接：

http://api.jquery.com/index/

如果您有關於函數的任何具體問題隨時問。

來源

2011-12-19 22:01:49 mahulst

該死的，你快了..我剛剛在文檔中發現了'.index（）'，是的，它看起來像是正確的方式.. – redShadow 2011-12-19 22:05:32

我知道.index（）這不是我正在尋找的爲:) 我想要這樣做：http://data.imagup.com/11/1138998080。png – MyBoon 2011-12-19 22:12:49

@ user1104720這裏你去：http://jsfiddle.net/98sAG/ – 2011-12-19 22:24:43

對於在DOM中的位置，我不認爲index()就足夠了，除非你比較兩個姐妹元素。更一般地，從兩個祖先名單，而相同

使用parents()
流行過的元素比較index()的最高不同的祖先

（或者，你也可以做index()在$('*')，但我想這將是可怕的低效率）

編輯：與澄清離子根據@邁克的答案，這現在正式成爲碰撞檢測問題。因此，我認爲像this是有序的，但請注意評論。您可以改爲使用jQuery offset() function來獲取元素的位置。比較邏輯是健全的。

來源

2011-12-19 22:15:53 Amadan

確定一個節點是否與另一個節點重疊

回答

相關問題