拖放元素以創建html輸入

Question

我已經開始使用拖放操作來構建拖放模板。在這個例子中，我從左邊拖在div＃段落元素和下跌在右欄中創建一個文本，但似乎有些不對勁

HTML

<div class="dropme" id="main1"> 
<div id="ytvid">YouTube video</div> 
<div id="paragraph">Paragraph</div> 
</div> 

<div class="dropme2" id="trash"> 
</div> 

JS

$('#main1 div').draggable({ 
cursor: 'pointer', 
connectWith: '.dropme2', 
helper: 'clone' 
}); 

$('.dropme2').sortable({ 
connectWith: '.dropme', 
cursor: 'pointer' 
}).droppable({ 
accept: '#main1 div', 
activeClass: 'highlight', 
drop: function(event, ui) { 
var $li = $("<div id="+$(ui.draggable).attr('id')+">").html(ui.draggable.html()); 
if ((ui.draggable).attr('id') == 'paragraph') { 
    var $elm = "<textarea style='width:100%; height:40px;' placeholder='text here'></textarea>"; 
    $elm.appendTo($li); 
     $li.appendTo(this); 
} 

} 

}); 

textarea的是未附加，並且該腳本在刪除段落元素後不起作用。那麼如何解決這個問題

JSFIDDLE

Answer 1

嘿嘗試這一點，我認爲它會工作

$li.append($elm); 
$(this).append($li);