obtenir les coordonnées X et Y d'un élément div

J'ai essayé de faire un javascript pour obtenir un des coordonnées X et Y d'un div élément. Après quelques essayant autour de moi, je suis venu avec quelques chiffres, mais je ne suis pas sûr de la façon de valider l'emplacement d'entre eux(le script retourne le X 168 et Y comme 258) je suis l'exécution du script avec une résolution d'écran de 1280 x 800. C'est le script que j'utilise pour obtenir ce résultat:

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

Maintenant la question est de. Serait-il raisonnable de supposer que ce sont les coordonnées exactes retourné par la fonction ou est-il facile de juste lancer un petit quelque chose sur l'endroit pour voir exactement ce que c'est?

Et, enfin, comment puis-je faire de ce div élément déplacer? Je sais que je devrais utiliser un mousedown gestionnaire d'événement pour garder le déplacement de l'élément, mais ouais des trucs/conseils sont grandement appréciés ma plus grande préoccupation est de savoir comment obtenir que lors de la boucle en cours d'exécution.

Vous ne devriez pas vous poser deux questions en une seule. Demandez le drag-n-drop question séparément.
+1 bonne question

OriginalL'auteur Jeffrey Klinkhamer | 2012-05-04

  1. 4

    Ici un moyen simple d'obtenir diverses informations concernant la position d'un élément 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;

    OriginalL'auteur Thariama

  2. 23

    De loin, le moyen le plus facile d'obtenir l'absolu de la position de l'écran d'un élément est getBoundingClientRect.

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

    Gardez à l'esprit, cependant, que les coordonnées ne pas inclure le document de défilement de décalage.

    Il semble getBoundingClientRect a été introduit dans Firefox 3: developer.mozilla.org/en/DOM/element.getBoundingClientRect - j'ai toujours utilisé le quirksmode méthode. C'est plus compatible 🙂
    grâce, ne le savait pas. J'utilise de la Mosaïque.
    Êtes-vous pour de vrai? Mosaïque comme dans la LOI Mosaïque?
    Petite faute de frappe: positon.la gauche devrait être la position.de gauche.

    OriginalL'auteur katspaugh

  3. 2

    Vous avez besoin pour trouver la position à l'aide de la position du parent. Il y a un très bon tuto ici: http://www.quirksmode.org/js/findpos.html

    OriginalL'auteur sole

  4. 2

    Je pense que vous pouvez utiliser jQuery .offset() http://api.jquery.com/offset/

    La question n'est pas balisé jQuery!
    ouais, mais encore il pourrait l'utiliser 😉

    OriginalL'auteur snies

  5. 0

    Compte tenu de l'élément...

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

    Si l'élément est dans la document principal vous pouvez obtenir le DIV coordonnées avec...

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

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

    Si l'élément est dans un iframe vous pouvez obtenir le DIV coordonnées avec...

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

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

    NB: Les valeurs retournées doivent être dans le format "190px" et "350px".

    OriginalL'auteur user4723924