title: jQuery UI Multiple Droppable - drag whole div element & clone
body: <p>I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $( "ul li" ).draggable({
          appendTo: "body",
          helper: "clone"});
      $( ".day #drag" ).draggable({
          appendTo: "body"});
      $( ".day" ).droppable({
          activeClass: "ui-state-hover",
          hoverClass: "ui-state-active",
          accept: ":not(.ui-sortable-helper)",
          drop: function( event, ui ) {
              var targetElem = $(this).attr("id");
  
              $( this ).addClass( "ui-state-highlight" );
              $( ui.draggable ).appendTo( this );
          }
      }).sortable({
          items: "li:not(.placeholder)",
          sort: function() {
              $( this ).removeClass( "ui-state-default" );
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Example column:</p>
  
  <pre><code>&lt;td&gt;
     &lt;div id="monday" class="day monday ui-widget-content"&gt;&lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Draggable element:</p>
  
  <pre><code>&lt;li&gt;&lt;div style="background-color:#&lt;?=$bgColor?&gt;;color:&lt;?=$textColor?&gt;;" id="drag" class="&lt;?=$subject?&gt;"&gt;&lt;?=$row['name']?&gt;&lt;/div&gt;&lt;/li&gt;
  </code></pre>
  
  <p>It's essentially a timetable setup tool. Thank you for the help</p>
  
  <p>Here is a jsFiddle for reference: <a href="http://jsfiddle.net/x5T4h/" rel="nofollow">http://jsfiddle.net/x5T4h/</a></p>