javascript - example - jQuery arrastrar y soltar: cómo llegar al elemento que se está arrastrando

events drag and drop html5

Question

Estoy usando la biblioteca jQuery para implementar arrastrar y soltar.

¿Cómo puedo obtener el elemento que se está arrastrando cuando se descarta?

Quiero obtener el id de la imagen dentro de div. El siguiente elemento es arrastrado:

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

Tengo la función caída estándar de su ejemplo:

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

He intentado varios ui.id etc. que no parece funcionar.

Answer 1

¿No es el ui.draggable?

Si vas aquí (en Firefox y asumes que tienes firebug) y miras en la consola Firebug, verás que estoy haciendo una consola.dir del objeto ui.draggable que es el div que se está arrastrando

http://jsbin.com/ixizi

Por lo tanto, el código que necesita en la función de soltar es

       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 tiene razón, dentro de su función consulte ui.draggable :

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

Esa propiedad apunta a lo que se arrastra.

Tenga en cuenta que si está utilizando "ayudantes" clonados, el que se pueda arrastrar será la copia clonada, no el original.

Answer 3

El ui.draggable () no parece funcionar más. Para obtener la identificación uno puede usar

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

Answer 4

tengo

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

Answer 5

Intenté la mayoría de las anteriores, pero al final solo

event.target.id

trabajó para mi.

Answer 6

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

...

Answer 7

RESPUESTA QUE FUNCIONA EN 2017

Ha pasado mucho tiempo, y descubrí que la respuesta aceptada actualmente ya no funciona.

Una solución que actualmente funciona:

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

Aquí, ui.helper.context refiere al objeto original que intentas arrastrar, y clone() hace referencia a la versión clonada.

EDITAR

Lo anterior también es ver qué objeto estás arrastrando usando la función draggable() . Para detectar qué objeto draggable se dejó caer en un droppable() , funciona lo siguiente:

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