Bir altlığın konumunu algılama

Question

Bazı blokların ana div çevresinde hareket ettiği küçük bir oyun oluşturdum. Ayrıca bir div tutan fare (imlecin bu div'a pozisyonunu vermiştim).

Sadece imleç div bloklar üzerinde hareket edip etmediğini izlemek istiyorum (bunlar da div). Eğer böyle gelirse oyun biter.

Blok veya imleç sekmesinin birbirinin üzerinde hareket edip etmediğini nasıl anlayabilirim?

Answer 1

jQuery kullanıyorsanız, bu kullanarak bir div sol, üst, genişlik ve yüksekliğini bulabilirsiniz: sol, sağ, üst ve alt çalışmak için kullanın olanlar

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

her div. Sonra iki div'ler birbirinin üstüne taşıyorsa:

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

Answer 2

Bu, düz javascript kullanarak basit bir görev değildir, çünkü divun soyunu izlemesi ve kesinlikle konumlandırılmış bir div bulana kadar göreceli konumları toplamlamanız gerekir.

Diğer taraftan, bu görev jQuery veya Prototype gibi bir javascript kitaplığı ile oldukça önemsizdir. JQuery'de, örneğin, $(myDiv).offset(), divun belgeye göre konumunu döndürür.

ayrıca jQuery UI içerir ve ana div yaparsanız

bir "sürüklenebilir" ve tek ihtiyacınız ana div diğeri üzerinde sürüklendiğinde bildirim almak için Droppable's over event üzerine kanca olan tüm diğer div'ler "Droppable" .

Answer 3

Eğer collision detection denir bahsediyoruz kavramı.

Çok basit olarak, divunuzun sınırlarını almanız ve daha sonra çakışıp çakışmadıklarını görmek için tüm bloklara geçmeniz gerekir.

Answer 4

getBoundingClientRect()

John Resig büyük Burada yazı vardır: (LGPL kodundan) buradan jQuery kullanmak istemiyorsanız getBoundingClientRect is Awesome

Answer 5

Kopyalayabileceğiniz/yapıştırma; http://code.google.com/p/ra-ajax/source/browse/trunk/Ra/Js/Ra.js

Bakılacak yer, satır no 'da "mutlak" işlevdir. While döngüsündeki "atası düğümleri" nin boyutunu hesaplayan 220.

Referanslar için buraya yapıştırılmış;

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; 
} 

"bu" Burada bir DOM elementi ... olduğunu

Sanıyorum Ancak

olduğunu kesinlikle pozisyonuyla başka div içine div'leri konumlandırılmış ne var: sadece kullanabilirsiniz, bu durumda görece; Daha hızlı "döngüler offset" yapıyor sonra büyüklüklerinin emir olacak

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

...