die X- und Y-Koordinaten für ein Div-Element erhalten

Question

Ich habe versucht, ein Javascript zu machen, um eine X- und Y-Koordinaten eines div Elements zu erhalten. Nach einigem Herumprobieren sind mir einige Zahlen aufgefallen, aber ich bin mir nicht sicher, wie ich den genauen Ort von ihnen überprüfen kann (das Skript gibt das X als 168 und Y als 258 zurück). Ich führe das Skript mit einer Bildschirmauflösung von 1280 aus x 800. Dies ist das Skript, das ich verwende, um dieses Ergebnis zu erhalten:

function get_x(div) { 
    var getY; 
    var element = document.getElementById("" + div).offsetHeight; 
    var get_center_screen = screen.width/2; 

    document.getElementById("span_x").innerHTML = element; 
    return getX; 
} 

function get_y(div) { 
    var getY; 
    var element = document.getElementById("" + div).offsetWidth; 
    var get_center_screen = screen.height/2; 

    document.getElementById("span_y").innerHTML = element; 
    return getY; 
}​ 

Jetzt ist die Frage. Wäre es vernünftig anzunehmen, dass dies genaue Koordinaten sind, die von der Funktion zurückgegeben werden, oder ist es einfach, einfach etwas an diesem Ort zu erzeugen, um zu sehen, was genau es ist?

Und schließlich, wie würde ich gehen, um dieses div Element zu bewegen? Ich weiß, ich sollte einen mousedown Event-Handler und eine Weile verwenden, um das Element zu bewegen, aber ja, alle Tipps/Hinweise sind sehr geschätzt, meine größte Sorge ist, wie diese While-Schleife zu bekommen.

Answer 1

Hier ist eine einfache Art und Weise verschiedene Informationen über die Position eines HTML-Element zu erhalten:

 var my_div = document.getElementById('my_div_id'); 
     var box = { left: 0, top: 0 }; 
     try { 
      box = my_div.getBoundingClientRect(); 
     } 
     catch(e) 
     {} 

     var doc = document, 
      docElem = doc.documentElement, 
      body = document.body, 
      win = window, 
      clientTop = docElem.clientTop || body.clientTop || 0, 
      clientLeft = docElem.clientLeft || body.clientLeft || 0, 
      scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop, 
      scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft, 
      top = box.top + scrollTop - clientTop, 
      left = box.left + scrollLeft - clientLeft; 

Answer 2

Sie müssen die Position auch über die Position des Elternteils finden. Es ist ein sehr gutes Tutorial hier: http://www.quirksmode.org/js/findpos.html

Answer 3

Ich glaube, Sie jQuery .Offset verwenden könnte() http://api.jquery.com/offset/

Answer 4

Bei weitem die einfachste Möglichkeit, die absolute Bildschirmposition eines Elements zu erhalten getBoundingClientRect ist.

var element = document.getElementById('some-id'); 
var position = element.getBoundingClientRect(); 
var x = position.left; 
var y = position.top; 
// Et voilà! 

Beachten Sie aber, dass die Koordinaten don’t include the document scroll offset.

Answer 5

Hey weiß nicht, ob jemand noch diese Antworten liest, aber ich hatte das gleiche Problem, das Sie mit der while-Schleife taten . Versuchen Sie das Ereignis onDrag, es funktioniert super!

Answer 6

das Element gegeben ...

<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div> 

Wenn das Element in der Hauptdokument ist Sie die mit

... Koordinaten des DIV bekommen

var X=window.getComputedStyle(abc,null).getPropertyValue('left'); 

var Y=window.getComputedStyle(abc,null).getPropertyValue('top'); 

Wenn das Element in einem ist iframe können Sie die Koordinaten des DIV erhalten mit ...

var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left'); 

var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top'); 

Hinweis: Die zurückgegebenen Werte sollten im Format "190px" und "350px" sein.