Comment obtenir la position d'un objet déplaçable

Vous pouvez utiliser le drag événement:

$('#dragThis').draggable({
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }
});

JS Fiddle démo.

Cette démo apporté à vous par les événement glisser, et les méthodes offset() et text().

---

Édité en réponse au commentaire de l'OP, à la question d'origine:

David, en fait ce dont j'ai besoin est un peu plus compliqué, mais vous pourriez faire une grande aide. Ce que je veux faire est de mettre un objet déplaçable et un drop d'image dans un panneau et faites glisser l'objet déplaçable sur l'image et la position de l'endroit où il a été abandonné. Je vais aussi besoin de l'objet déplaçable à être redimensionnables et d'obtenir la taille de celui-ci à la fin aussi 🙂 merci

...euh, whoah...

Je pense ce genre de couvre les bases de ce qui est demandé:

$('#dragThis').draggable( {
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalY').text('Final X: ' + finalyPos);
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

Mise à jour JS Fiddle démo.

Nouvellement mis à jour JS Fiddle démo, avec revert: invalid, afin de tomber la déplaçable div n'importe où mais la droppable div sera la cause de la déplaçable pour animer revenir à sa position de départ. Si ce serait apprécié. Ou souhaité à tous...

Pour répondre à l'exigence de la draggable objet à resizable ainsi, je ne pense pas que cela est possible, puisque les deux draggable() et resizable() répondre à la même interaction. Il peut être possible, d'une certaine façon, mais il est actuellement au-delà de mon ken, je le crains.

---

Édité pour ajouter de la hauteur/largeur de l'exigence, et aussi pour ranger un peu les choses et d'améliorer le CSS. Qui a dit:

HTML:

<div id="dragThis">
    <ul>
        <li id="posX">x: <span></span></li>
        <li id="posY">y: <span></span></li>
        <li id="finalX">Final X: <span></span></li>
        <li id="finalY">Final Y: <span></span></li>
        <li id="width">Width: <span></span></li>
        <li id="height">Height: <span></span></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS:

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

jQuery:

$('#dragThis').draggable({
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX > span').text(xPos);
        $('#posY > span').text(yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX > span').text(finalxPos);
        $('#finalY > span').text(finalyPos);
        $('#width > span').text($(this).width());
        $('#height > span').text($(this).height());
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

JS Fiddle de démonstration, de la ci-dessus.

Vous pouvez obtenir la largeur de sortie avec .redimensionnable() et stop. Essayez d'ajouter ceci:

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });