jQuery drag and drop - comment accéder à l'élément en cours de déplacement ?

Question

J'utilise la bibliothèque jQuery pour mettre en œuvre la fonction glisser-déposer.

Comment accéder à l'élément qui est traîné lorsqu'il est déposé ?

Je veux obtenir l'id de l'image à l'intérieur du div. L'élément suivant est traîné :

<div class="block">
    <asp:Image ID="Image9" AlternateText="10/12/2008 - Retina" Width=81 Height=84 ImageUrl="~/uploads/ImageModifier/retina.jpg" runat=server />
</div>

J'ai la fonction standard abandonnée de leur exemple :

$(".drop").droppable({
                 accept: ".block",
                 activeClass: 'droppable-active',
                 hoverClass: 'droppable-hover',
                 drop: function(ev, ui) { }
});

J'ai essayé plusieurs ui.id etc., ce qui ne semble pas fonctionner.

Answer 1

N'est-ce pas l'ui.draggable ?

Si vous allez ici (dans Firefox et en supposant que vous avez firebug) et regardez dans la console firebug, vous verrez que je fais un console.dir de l'objet ui.draggable qui est la div en cours de déplacement.

http://jsbin.com/ixizi

Par conséquent, le code dont vous avez besoin dans la fonction de dépôt est le suivant

       drop: function(ev, ui) {
                 //to get the id
                 //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
                 console.dir(ui.draggable)  
       }

Answer 2

$(ui.draggable).attr("id")    

...

Answer 3

La fonction ui.draggable() ne semble plus fonctionner. Pour obtenir l'id, on peut utiliser

$(event.target).attr("id");

Answer 4

RÉPONSE QUI FONCTIONNE EN 2017

Beaucoup de temps a passé, et j'ai constaté que la réponse acceptée actuellement ne fonctionne plus.

Une solution qui fonctionne actuellement :

$('#someDraggableGroup').draggable({
                helper: 'clone',
                start: function( event, ui ) {
                    console.log(ui.helper.context)
                    console.log(ui.helper.clone())
                }
            })

Ici, ui.helper.context fait référence à l'objet original que vous essayez de faire glisser, et clone() fait référence à la version clonée.

EDITAR

Ce qui précède permet de voir quel objet vous faites glisser en utilisant la fonction draggable() fonction. Pour détecter ce que draggable a été déposé dans un droppable() les travaux suivants :

$('#myDroppable').droppable({
    drop: function(event, ui){
        console.log(ui.draggable.context)
                 OR
        console.log(ui.draggable.clone() )
    }
})

Answer 5

J'ai essayé la plupart des solutions ci-dessus, mais à la fin seulement

event.target.id

a fonctionné pour moi.