Question

我开始使用拖放来拖放来构建模板。在这个例子中，我从左边拖动div＃paragraph元素并在右列中删除以创建textarea，但似乎有些不对劲

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

拖放元素以创建html输入

1 个答案: