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() )
}
})