拖放元素以创建 html 输入

Question

我已经开始使用拖放来构建带有拖放功能的模板。在此示例中，我将 div#paragraph 元素从左侧拖放到右侧列中以创建文本区域，但似乎有问题

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

}

});

文本区域未附加，并且在删除段落元素后脚本不起作用。那么如何解决这个问题

JSFIDDLE

Answer 1

嘿试试这个，我认为它会工作

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