obteniendo las coordenadas X e Y para un elemento div

Question

He estado tratando de hacer un javascript para obtener las coordenadas X e Y de un elemento div. Después de algunas pruebas, he encontrado algunos números, pero no estoy seguro de cómo validar la ubicación exacta de ellos (el script devuelve la X como 168 e Y como 258). Estoy ejecutando la secuencia de comandos con una resolución de pantalla de 1280. x 800. este es el script que utilizo para obtener este resultado:

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

Ahora la pregunta es. ¿Sería razonable suponer que se trata de coordenadas precisas devueltas por la función o es fácil generar algo en ese lugar para ver qué es exactamente?

Y finalmente, ¿cómo haré para mover este elemento div? Sé que debería usar un controlador de eventos mousedown y un momento para seguir moviendo el elemento, pero sí cualquier consejo o sugerencia son muy apreciados, mi mayor preocupación es cómo ejecutar ese bucle while.

Answer 1

aquí una forma sencilla de obtener diversa información relativa a la posición de un elemento html:

 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

Necesita encontrar la posición usando la posición de los padres también. Hay un muy buen tutorial aquí: http://www.quirksmode.org/js/findpos.html

Answer 3

Creo que se podría usar jQuery .offset() http://api.jquery.com/offset/

Answer 4

Por el momento, la forma más fácil de obtener la posición de la pantalla absoluta de un elemento es getBoundingClientRect.

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

Tenga en cuenta, sin embargo, que las coordenadas don’t include the document scroll offset.

Answer 5

Hey no saben todavía si alguien lee estas respuestas, pero tuve el mismo problema que lo hizo con el bucle while . Prueba el evento en Drag, ¡funciona genial!

Answer 6

Dado el elemento ...

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

Si el elemento se encuentra en el documento principal puede obtener coordenadas de la DIV con ...

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

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

Si el elemento se encuentra en una iframe puede obtener las coordenadas del DIV con ...

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

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

Nota: Los valores devueltos deben tener el formato "190px" y "350px".