web-dev-qa-db-fra.com

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

J'essaie d'obtenir les x et y de l'objet déplaçable à l'aide de JQuery.

Le scénario est le suivant: je fais glisser un objet sur un autre et je souhaite obtenir la position de l'objet glisser-déposer. Edit: Maintenant je peux obtenir la position de l'objet mais il me faut plus:

Voici ce que j'ai essayé.

<script>
    $(function() {
        $('#draggable').draggable(
{
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $(this).text('x: ' + xPos + 'y: ' + yPos);

    }
});
        $("#droppable").droppable({
            drop: function(event, ui) {
                $(this)
                .addClass("ui-state-highlight")
                .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>

Maintenant, je peux obtenir la position de l'objet déplaçable, mais j'ai besoin qu'il soit redimensionnable et en plus d'obtenir x, y de l'objet déplaçable, j'ai également besoin de la taille de celui-ci.

Toute aide est la bienvenue!

Merci.

jqueryjquery-uidrag-and-dropposition
28
Pabuc

Vous pouvez en essayer un:

$(this).position()

ou

$(this).offset()

La méthode .position() nous permet de récupérer la position actuelle d'un élément par rapport au parent décalé. Comparez cela avec .offset(), qui récupère la position actuelle par rapport au document.

De http://api.jquery.com/position/

12
user603881

Vous pouvez obtenir la sortie en largeur avec .resizable () et stop event. 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());
      }
   });
0
Colton Gwinn