jQuery x y coordinate documento dell'oggetto DOM

Question

Ho bisogno di ottenere le coordinate X, Y (relative al documento in alto/a sinistra) per un elemento DOM. Non riesco a individuare alcun plugin o proprietà o metodo jQuery che possa darmeli. Posso ottenere la parte superiore e sinistra dell'elemento DOM, ma ciò può essere relativo al contenitore/genitore corrente o al documento.

Answer 1

è possibile utilizzare Dimensions plug [... Deprecato incluso nella versione 1.3.2 e successive jQuery]

Offset()
Prendi l'offset del primo elemento abbinato corrente, in pixel, relativo al documento .

posizione()
ottiene la posizione superiore e sinistro di un elemento rispetto al suo genitore compensare.

sapendo questo, allora è facile ... (usando il mio piccolo svg project come example page)

var x = $("#wrapper2").offset().left; 
var y = $("#wrapper2").offset().top; 

console.log('x: ' + x + ' y: ' + y); 

uscita:

x: 53 y: 177 

Speranza che aiuta quello che stai cercando.

ecco un'immagine di offset() e la posizione()

utilizzando XRay

utilizzando Web Developer barra degli strumenti

Answer 2

Il offset la funzione lo farà per te.

Ecco l'esempio che danno:

var p = $("p:last"); 
var offset = p.offset(); 
p.html("left: " + offset.left + ", top: " + offset.top); 

Answer 3

La mia soluzione è un plugin con "soluzioni alternative": + D. Ma funziona!

jQuery.fn.getPos = function(){ 
     var o = this[0]; 
     var left = 0, top = 0, parentNode = null, offsetParent = null; 
     offsetParent = o.offsetParent; 
     var original = o; 
     var el = o; 
     while (el.parentNode != null) { 
      el = el.parentNode; 
      if (el.offsetParent != null) { 
       var considerScroll = true; 
       if (window.opera) { 
        if (el == original.parentNode || el.nodeName == "TR") { 
         considerScroll = false; 
        } 
       } 
       if (considerScroll) { 
        if (el.scrollTop && el.scrollTop > 0) { 
         top -= el.scrollTop; 
        } 
        if (el.scrollLeft && el.scrollLeft > 0) { 
         left -= el.scrollLeft; 
        } 
       } 
      }    
      if (el == offsetParent) { 
       left += o.offsetLeft; 
       if (el.clientLeft && el.nodeName != "TABLE") { 
        left += el.clientLeft; 
       } 
       top += o.offsetTop; 
       if (el.clientTop && el.nodeName != "TABLE") { 
        top += el.clientTop; 
       } 
       o = el; 
       if (o.offsetParent == null) { 
        if (o.offsetLeft) { 
         left += o.offsetLeft; 
        } 
        if (o.offsetTop) { 
         top += o.offsetTop; 
        } 
       } 
       offsetParent = o.offsetParent; 
      } 
     } 
     return { 
      left: left, 
      top: top 
     }; 
    }; 

utilizzati:

var p = $("#wrapper2").getPos(); 
alert("top:"+p.top+"; left:"+p.left);