拖放元素以创建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);