title: Jquery Draggable and Droppable, dropping full div content
body: <p>I have a div:</p>
  
  <pre><code>&lt;div&gt;
  Hello there
  &lt;img src="cnnc.png" /&gt;
  &lt;/div&gt;
  
  
  
  
     &lt;div id="cart"&gt;
  &lt;div class="placeholder"&gt;drop here&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and I want to be able to drag it into my droppable box and append all the content of that div to my droppable box. The problem is that my droppable code only appends text to the box, how can I change it to append all content:</p>
  
  <pre><code>$("#cart").droppable({
          activeClass: "ui-state-default",
          hoverClass: "ui-state-hover",
          accept: ":not(.ui-sortable-helper)",
          drop: function(event, ui) {
              $(this).find(".placeholder").remove();
              $("&lt;li&gt;&lt;/li&gt;").text(ui.draggable.text()).appendTo(this);
          }
  </code></pre>