jQuery: ziehbare Verbindung zu sortierbar. ziehbares Element hat ein anderes DOM als sortierbare Liste

Question

Ich kann jetzt ein Element zu einem sortierbaren ziehen. Aber die sortierbare Liste hat ein anderes DOM.

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

Der Helfer hat diese: xxx Dies sollte in die sortierbare fallen gelassen werden ...

Die "Helfer" arbeitet. Aber wenn ich das Element in das Sortierbare "fallen gelassen" habe, wird es einfach zum "ursprünglichen" DOM ​​zurückversetzt. Ich möchte, dass das "neu erstellte DOM" (dasjenige, das im Helfer erstellt wurde) in das Sortierfeld fällt.

Ich hoffe, dass ich Sinn mache. Vielen Dank!

Eine andere Art zu sagen: Wenn ich einen Apfel ziehe, wird es jetzt in eine Orange. aber wenn ich es fallen lasse, wird es wieder zu einem Apfel.

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