Jquery Draggable and Droppable, dropping full div content

I have a div:

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




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

and I want to be able to drag it into my droppable box and append all the content of that div to my 开发者_StackOverflowdroppable box. The problem is that my droppable code only appends text to the box, how can I change it to append all content:

$("#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);
        }

You can do it like this:

$("#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);
    }
});

This actually clones the elements by using .contents(), if you need any event handlers and data, use .clone(true) instead.