jQuery: arrastrable conéctate a ordenable. el elemento arrastrable tiene un DOM diferente de la lista ordenable

Question

Ahora puedo arrastrar un elemento a una ordenable. Pero la lista ordenable tiene un DOM diferente.

<!-- The draggable items. Has the "original" DOM in the LI tags. --> 
<ul class="draggable_text"> 
    <li><span>DRAG THIS A</span></li> 
    <li><span>DRAG THIS B</span></li> 
</ul> 


<!-- This list has a different DOM in the LI tags --> 
<ul id="stagerows"> 
    <li><p>This is a new DOM dragged from "DRAG THIS A"</p></li> 
    <li><p>This is a new DOM dragged from "DRAG THIS B"</p></li> 
</ul> 

$(document).ready(function() { 
    $('.draggable_text > li').draggable({ 
     //helper:'clone', 
     helper: function(event, ui) { 
      return '<div style="width: 100px; height: 50px; border: 1px solid #000; background-color: #fff;">xxx</div>'; 
     }, 
     connectToSortable:'#stagerows' 
    }); 

    $('#stagerows').sortable({ 
     handle: '.drag_handle' 
    }); 
}); 

El ayudante tiene esta: xxx Esto se debe caer en la sortable ...

El "ayudante" funciona. Pero cuando "dejé caer" el artículo en el ordenable, simplemente vuelve al DOM "original". Me gustaría que el "DOM creado recientemente" (el creado en el helper) se deje caer en el ordenable.

Espero que tenga sentido. ¡Gracias!

Otra forma de decirlo: cuando arrastro una manzana, ahora se convierte en una naranja. pero cuando lo dejo caer, vuelve a ser una manzana ...

Answer 1

$('.draggable_text > li').draggable({ 
    helper: function(event, ui) { 
     var type = $(this).find('.link_type').val(); 
     return create(type,0); 
    }, 
    connectToSortable:'#stagerows' 
}); 

$('#stagerows').sortable({ 
    handle: '.drag_handle', 
    placeholder: 'placeholder_sortable' 
}); 

/** 
* When item is dropped from the Add <Stuff> 
*/ 
$('#stagerows').droppable({ 
    drop: function(event, ui){ 
     type = ui.draggable.find('.link_type').val(); 
     ui.draggable.empty(); 
     return ui.draggable.html(create(type,0)) 
    } 
});