jQuery：draggableはソート可能に接続します。ドラッグ可能なアイテムはソート可能なリストと異なるDOMを持っています

Question

アイテムをソート可能なアイテムにドラッグできるようになりました。しかし、ソート可能なリストには異なる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' 
    }); 
}); 

ヘルパーは、この持っている：これはソート可能に落とされるべき XXX ...

"ヘルパー" の作品。しかし、アイテムをソート可能に「落とした」ときは、元のDOMに戻ります。私は "新しく作成されたDOM"（ヘルパーで作成されたもの）をソート可能にしたいと思っています。

私は理に適っていると思います。ありがとうございました！

別の言い方をすると： リンゴをドラッグすると、今はオレンジ色に変わります。私はそれをドロップすると、それはリンゴに戻って..

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