uzyskiwanie współrzędnych X i Y dla elementu div

Question

Próbowałem utworzyć javascript, aby uzyskać współrzędne X i Y elementu div. Po kilku próbach wymyślam kilka liczb, ale nie jestem pewien, jak zweryfikować ich dokładną lokalizację (skrypt zwraca X jako 168, a Y jako 258). Uruchomiłem skrypt z rozdzielczością ekranu 1280 x 800. To jest skrypt, którego używam, aby uzyskać ten wynik:

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

Teraz pytanie. Czy uzasadnione byłoby założenie, że są to dokładne współrzędne zwrócone przez funkcję, czy też łatwo jest odrodzić coś w tym miejscu, aby zobaczyć, co to jest?

W końcu, w jaki sposób chciałbym wprowadzić element div? Wiem, że powinienem użyć programu obsługi zdarzeń mousedown i chwilę, aby przenieść element, ale tak, wszelkie wskazówki/wskazówki są bardzo cenne, moim największym zmartwieniem jest to, jak uzyskać to podczas pracy w pętli.

Answer 1

Oto prosty sposób, aby uzyskać różne informacje dotyczące położenia elementu 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

Musisz znaleźć pozycję również za pomocą pozycji rodzica. Jest to bardzo dobry tutorial tutaj: http://www.quirksmode.org/js/findpos.html

Answer 3

Myślę, że można użyć jQuery .offset() http://api.jquery.com/offset/

Answer 4

zdecydowanie najprostszy sposób, aby uzyskać bezwzględne położenie ekranu elementu jest getBoundingClientRect.

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

Pamiętaj jednak, że współrzędne don’t include the document scroll offset.

Answer 5

Hej nie wiem, czy ktoś jeszcze czyta te odpowiedzi, ale miałem ten sam problem co zrobiłeś z pętli while . Wypróbuj wydarzenie onDrag, działa świetnie!

Answer 6

Biorąc pod uwagę element ...

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

Jeśli element jest w głównym dokumencie można uzyskać współrzędne div jest z ...

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

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

Jeśli element jest w sposób iframe możesz uzyskać współrzędne DIV za pomocą ...

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

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

UWAGA: Zwrócone wartości powinny mieć format "190px" i "350px".