Jquery Draggable and Droppable，删除完整的div内容答案

【问题标题】：Jquery Draggable and Droppable, dropping full div contentJquery Draggable and Droppable，删除完整的div内容
【发布时间】：2011-03-05 20:33:50
【问题描述】：

我有一个 div：

<div>
Hello there
<img src="cnnc.png" />
</div>




   <div id="cart">
<div class="placeholder">drop here</div>
    </div>

并且我希望能够将它拖到我的可放置框中，并将该 div 的所有内容附加到我的可放置框中。问题是我的可放置代码仅将文本附加到框中，如何更改它以附加所有内容：

$("#cart").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
        }

【问题讨论】：

标签： jquery html drag-and-drop append

【解决方案1】：

你可以这样做：

$("#cart").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function(event, ui) {
        $(this).find(".placeholder").remove();
        $("<li></li>").append(ui.draggable.contents().clone()).appendTo(this);
    }
});

这实际上是使用.contents() 克隆元素，如果您需要任何事件处理程序和数据，请改用.clone(true)。

【讨论】：