jQuery: draggable connect to sortable. objet draggable a un DOM différent de la liste triable

Question

Je suis maintenant capable de faire glisser un élément vers un sortable. Mais la liste triable a un DOM différent.

<!-- 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' 
    }); 
}); 

L'assistant a ceci: xxx Cela devrait être déposé dans le triables ...

Le "aide" fonctionne. Mais quand j'ai "laissé tomber" l'article dans le sortable, il revient juste au DOM "original". Je voudrais que le "DOM nouvellement créé" (celui créé dans helper) soit déposé dans le triable.

J'espère que j'ai du sens. Je vous remercie!

Une autre façon de le dire: quand je traîne une pomme, il se transforme maintenant en orange. mais quand je le laisse tomber, il se transforme en une pomme ..

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