jQuery - manipular el elemento descartado en la lista sortable

Question

Tengo una lista arrastrable (.field) donde puede arrastrar & soltar elementos de él en una lista ordenable (.sortlist). Lo hice de esta manera porque no quería que la lista maestra (.field) cambiara de ninguna manera. Funciona bien, excepto que no puedo descifrar cómo manipular el campo caído en una lista ordenable.

puedo hacerlo desde una arrastrable en un área lanzables mediante la siguiente en una función de 'gota:' en lanzables():

$(this).append('html code here to change content of dragged field'); 

Sin embargo, esto no funciona dentro de un ordenable() . Mi código es el siguiente:

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    var dropElemTxt = $(ui.item).text(); 
    var dropElemId = $(ui.item).attr('id'); 
    $(ui.item).replaceWith('<li class="box" id="'+dropElemId+'">Updated field! '+dropElemTxt+'</li>'); 
    } 
}); 

$ (ui.item) .replaceWith cambia el campo principal que estaba siendo arrastrado, por lo que este no funciona. Y probé $ (this) .replaceWith, pero eso actualiza el área ordenable (.sortlist).

¿Alguna idea de qué código necesito para hacer referencia al elemento arrastrado?

Muchas gracias, Ali.

Answer 1

Creo que lo he resuelto. Un poco hacky, pero parece funcionar!

Tengo que utilizar $ ('sortlist li:. Última') para acceder al elemento arrastrado ...

Answer 2

Creo que en realidad ocurrió una solución mejor ... parece funcionar hasta ahora ..

Adjunté un droppable a un ordenable para declarar una var global del elemento arrastrado. Un poco de este modo:

$(".sortlist").droppable({ 
    drop: function(e, ui) { 
    draggedItem = ui.draggable; 
    } 
}).sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
}); 

Answer 3

me siguió su línea de pensamiento, pero había algunos errores que utilizan este enfoque (a veces el elemento que es caída desapareció cuando se utiliza lanzables + ordenable). Aquí hay algo que funcionó para mí:

$(".draglist").draggable({ 
    start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
}); 

$(".sortlist").sortable({ 
    receive: function(event, ui) { 
    //do something with the 'draggedItem' here... 
    var droppedElemTxt = draggedItem.text(); 
    var droppedElemId = draggedItem.attr('id'); 
    } 
    , start: function(e, ui) { 
    draggedItem = ui.item; 
    } 
}); 

Answer 4

No ser capaz de acceder al elemento caído es un known bug in JQuery ui sortables. El billete contiene un parche que le permite acceder al elemento caído, y se espera que se fije en la siguiente lanzamiento principal.

Answer 5

usted podría conseguir el elemento arrastrado en beforeStop evento:

beforeStop: function (event, ui) { draggedItem = ui.item;}, 
receive: function (event, ui) { /* use draggedItem here*/ } 

Usando beforeStop evento en lugar de reciben fue suficiente para mí:

beforeStop: function(event, ui) { 
     var myClassItem = $('.myClass', ui.item); 
     myClassItem.bind('click', function(){ /*my function*/ }); 
    }