jQuery glisser-déposer - comment obtenir l'élément en train d'être déplacé

Question

J'utilise la bibliothèque jQuery pour implémenter le glisser-déposer.

Comment obtenir l'élément qui est déplacé lorsqu'il est déposé?

Je veux obtenir l'identifiant de l'image dans la 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 est passé de leur exemple:

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

J'ai essayé différents ui.id etc., qui ne semble pas fonctionner.

Answer 1

N'est-ce pas le 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 le div traîné

http://jsbin.com/ixizi

Par conséquent, le code dont vous avez besoin dans la fonction de chute est

 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

redquare est juste, à l'intérieur de votre fonction reportez-vous à ui.draggable:

$(".drop").droppable({ accept: ".block", 
         activeClass: 'droppable-active', 
         hoverClass: 'droppable-hover', 
         drop: function(ev, ui) { 
          //do something with ui.draggable here 
         } 
}); 

Cette propriété pointe vers la chose en train d'être déplacée.

Notez que si vous utilisez des "assistants" clonés, le fichier déplaçable sera la copie clonée et non l'original.

Answer 3

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

...

Answer 4

Le ui.draggable() ne semble pas fonctionner plus. Pour obtenir l'identifiant, on peut utiliser

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

Answer 5

je suis

drop: function(event, ui) {alert(ui.draggable.attr("productid"));} 

Answer 6

J'ai essayé la plupart de ce qui précède, mais à la fin seulement

event.target.id 

a fonctionné pour moi.

Answer 7

RÉPONSE QUI FONCTIONNE EN 2017

Beaucoup de temps est passé à côté, et je l'ai trouvé que la réponse acceptée actuelle 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 d'origine que vous essayez de faire glisser, et clone() se réfère à la version clonée.

EDIT

Le voir ci-dessus est trop quel objet vous faites glisser en utilisant la fonction draggable(). Pour détecter quel objet draggable a été abandonné dans un droppable(), les travaux suivants:

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