如何在Jquery中找到可移动div的坐标

Question

How can I find the coordinates of my movable div? I want to be able to find the coordinates after it has been moved so that I can add boundaries to the game, have it shoot lasers from the divs location etc. Thank you very much in advance!

edit:

I tried using this:

var offsets = $('#img').offset();
var top = offsets.top;
var left = offsets.left;
if (left > 0) {$('#img').animate({left: "-=10px"}, 'fast');}

this didn't work so I test to see what was happening by putting:

setTimeout(function() {alert(left);}, 5000);

I then moved it around and discovered that it wasn't updating the location of the Div as after the alert activated it gave me a number that wasn't the original css value but was close to it which may be because it's an irregular div or just the way offset works.

---

var state = 1;


$(document).ready(function() {

$(document).keydown(function(key) {
    if(state == 1) {
    switch(parseInt(key.which,10)) {
        // Left
        case 37:
            $('#img').animate({left: "-=10px"}, 'fast');
        state = 2;
        setTimeout(function() {
            state = 1;
        }, 200);
            break;
        // Up
        case 38:
        $('#img').animate({top: "-=10px"}, 'fast');
        state = 2;
        setTimeout(function() {
            state = 1;
        }, 200);
            break;
        // Right
        case 39:
        $('#img').animate({left: "+=10px"}, 'fast');
        state = 2;
        setTimeout(function() {
            state = 1;
        }, 200);
            break;
        // Down 
        case 40:
        $('#img').animate({top: "+=10px"}, 'fast');
        state = 2;
        setTimeout(function() {
            state = 1;
        }, 200);
            break;
    }
    }
});
});

Answer 1

Use jQuery.offset() to get an offset coordinates relative to the document or jQuery.position() to get coordinates relative to the offset of the parent element.

Both methods will return you an object with properties top and left .

var $movableDiv = $('#img'),
    imgAbsolutePosition,
    setImgAbsolutePosition;

setImgAbsolutePosition = function() {
    imgAbsoultePosition = $movableDiv.offset();
};

$('#img').animate({top: "+=10px"}, {
    duration: 'fast',
    complete: setImgAbsolutePosition
});

If the position of an element is changed you'll have to retrieve it again with jQuery.offset() and update your variables left and top .

it gave me a number that wasn't the original css value but was close to it

Take into account border , padding and margin of the element and its container.

Also Example