web-dev-qa-db-fra.com

jQuery drag and drop - comment arriver à l'élément en train de glisser

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

Comment puis-je obtenir l'élément qui est déplacé quand il est déposé?

Je veux obtenir l'identifiant de l'image à l'intérieur de la div. L'élément suivant est déplacé:

<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é divers ui.id etc. qui ne semblent pas fonctionner.

javascriptjquerydrag-and-drop
36
alexmac

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 suis en train de faire un fichier console.dir de l'objet ui.draggable qui est la div en train de glisser

http://jsbin.com/ixizi

Par conséquent, le code dont vous avez besoin dans la fonction de dépôt 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)  
       }
37
redsquare
$(ui.draggable).attr("id")

...

14
Zak

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

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

UNE RÉPONSE QUI FONCTIONNE EN 2017

Beaucoup de temps s'est écoulé 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 d'origine que vous essayez de faire glisser et clone() à la version clonée. 

MODIFIER

Ce qui précède vous permet également de voir quel objet vous faites glisser à l'aide de la fonction draggable(). Pour détecter quel objet draggable a été déposé dans une droppable(), les opérations suivantes fonctionnent:

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

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

event.target.id

a travaillé pour moi.

6
Daniel Mlodecki

redquare a raison, dans 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 sur la chose traînée.

Notez que si vous utilisez des "assistants" clonés, le glissable sera la copie clonée, pas l'original.

3
Adam Bellaire

j'ai eu 

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

Comment manipuler un objet clone dans n'importe quelle opération jquery ui?

Il suffit de cibler le langage HTML externe et d’utiliser les sélecteurs html jquery normaux.

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

attributs => id, classe, rel, alt, titre ou attribut personnalisé tel que nom-donnée , utilisateur de données

0
Shailesh Dwivedi