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

Redquare a raison, à l'intérieur de votre fonction se référer à 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é désigne la chose qui est traînée.

Notez que si vous utilisez des "aides" clonées, le draggable sera la copie clonée, et non l'original.

Answer 2

J'ai

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

Answer 3

Comment manipuler un objet clone dans une opération de l'interface utilisateur de Jquery ?

Il suffit de cibler le html extérieur de l'interface utilisateur et d'utiliser les sélecteurs jquery du html normal.

var target_ui_object_html=$(ui.item.context).attr("your attributes");

attributs => id ,class ,rel,alt ,title ou attr personnalisé comme data-name , data-user