nhận tọa độ X và Y cho phần tử div

Question

Tôi đã cố gắng tạo javascript để có tọa độ X và Y của phần tử div. Sau khi một số cố gắng xung quanh tôi đã đưa ra một số con số nhưng tôi không chắc chắn làm thế nào để xác nhận vị trí chính xác của chúng (kịch bản trả về X là 168 và Y là 258) Tôi đang chạy kịch bản với độ phân giải màn hình 1280 x 800. Đây là tập lệnh tôi sử dụng để nhận kết quả này:

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

Bây giờ câu hỏi là. Nó sẽ là hợp lý để giả định rằng đây là những tọa độ chính xác được trả về bởi chức năng hoặc là có dễ dàng để chỉ sinh ra một chút gì đó trên vị trí đó để xem chính xác nó là gì?

Và cuối cùng tôi sẽ làm thế nào để chuyển động phần tử div này? Tôi biết tôi nên sử dụng một xử lý sự kiện mousedown sự kiện và một thời gian để tiếp tục di chuyển các yếu tố nhưng yeah bất kỳ lời khuyên/gợi ý được đánh giá rất nhiều mối quan tâm lớn nhất của tôi là làm thế nào để có được trong khi vòng lặp chạy.

Answer 1

Dưới đây là một cách đơn giản để có được thông tin khác nhau về vị trí của một phần tử 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

Bạn cũng cần tìm vị trí bằng cách sử dụng vị trí của cha mẹ. Có một hướng dẫn rất tốt ở đây: http://www.quirksmode.org/js/findpos.html

Answer 3

Tôi nghĩ rằng bạn có thể sử dụng jQuery .offset() http://api.jquery.com/offset/

Answer 4

Cho đến nay, cách dễ nhất để có được những màn hình vị trí tuyệt đối của một nguyên tố là getBoundingClientRect.

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

Xin lưu ý rằng tọa độ don’t include the document scroll offset.

Answer 5

Hey không biết nếu ai vẫn đọc những câu trả lời nhưng tôi đã có vấn đề tương tự như bạn đã làm với các vòng lặp while . Hãy thử sự kiện onDrag, nó hoạt động tuyệt vời!

Answer 6

Với phần tử ...

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

Nếu nguyên tố này là trong tài liệu chính bạn có thể nhận được tọa độ của DIV với ...

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

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

Nếu phần tử nằm trong một iframe bạn có thể nhận tọa độ của DIV với ...

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

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

NB: Giá trị trả về phải ở định dạng "190px" và "350px".