получение координат X и Y для элемента div

Я пытался сделать javascript, чтобы получить координаты X и Y div элемент. После некоторых попыток я придумал некоторые цифры, но я не уверен, как проверить точное местоположение их(сценарий возвращает X как 168 и Y как 258), я запускаю сценарий с разрешением экрана 1280 x 800. Это скрипт, который я использую для получения этого результата:

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

теперь вопрос. Было бы разумно предположить, что это точные координаты возвращается функцией или есть легко просто создать что-то на этом месте, чтобы увидеть, что именно это такое?

и, наконец, как я буду делать это div переместить элемент? Я знаю, что должен использовать mousedown обработчик событий и некоторое время, чтобы продолжать перемещать элемент, Но да, любые советы/подсказки очень ценятся, моя самая большая проблема заключается в том, как получить это во время выполнения цикла.

9
drag-and-drop javascript

5 ответов

здесь простой способ получить различную информацию о положении элемента 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;
4

безусловно, самый простой способ получить абсолютное положение экрана элемента -getBoundingClientRect.

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

имейте в виду, что координаты Не включать смещение прокрутки документа.

20

вам нужно найти позицию, используя позицию родителя тоже. Здесь есть очень хороший учебник:http://www.quirksmode.org/js/findpos.html

2

Я думаю, вы можете использовать jQuery .offset ()http://api.jquery.com/offset/

2

данный элемент...

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

Если элемент находится в основной документ вы можете получить координаты DIV С...

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

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

Если элемент находится в окне iframe вы можете получить координаты DIV С...

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

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

NB: возвращаемые значения должны быть в формате "190px"и " 350px".

0