Drag and Drop elements to create html inputs

Question

I've started using drag and drop to build a template with drag and drop. In this example I dragged the div#paragraph element from left and dropped in the right column to create a textarea but seems there's something wrong

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

}

});

The textarea is not appended and the script doesn't work after dropping the paragraph element. So how to fix this

JSFIDDLE

Answer 1

Hey try this i think it will work

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