title: Make draggable element sortable within droppable using jQuery UI
body: <p><strong>RESOLVED</strong></p>
  
  <p>So I studied <code>sortable()</code> with the <code>connectWith</code> attribute a bit more and found the solution was simpler than I expected, but I was thinking about it sort of backwards because of <code>draggable()</code> and <code>droppable()</code>.</p>
  
  <p>Here's the fiddle: <a href="http://jsfiddle.net/DKBU9/12/" rel="nofollow noreferrer">http://jsfiddle.net/DKBU9/12/</a></p>
  
  <hr>
  
  <p><em>Original question follows:</em></p>
  
  <p>This is an extension of a previous SO question that I felt should be kept separate.</p>
  
  <p>The original question is here: <a href="https://stackoverflow.com/questions/20964467/jquery-ui-clone-droppable-sortable-list-after-drop-event/20964766?noredirect=1#20964766">jQuery UI - Clone droppable/sortable list after drop event</a>. It regards reinitializing the droppable handler on cloned elements.</p>
  
  <p>On top of that though, I'm trying to allow the elements that have been dragged from the initial list to be sorted within the droppable lists.</p>
  
  <p>Here is a fiddle essentially illustrating the current behaviour as a result of the original question: <a href="http://jsfiddle.net/DKBU9/7/" rel="nofollow noreferrer">http://jsfiddle.net/DKBU9/7/</a></p>
  
  <p>And the required code because SO likes to complain and bloat these posts:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="draggables"&gt;
  
      &lt;li&gt;foo1&lt;/li&gt;
      &lt;li&gt;foo2&lt;/li&gt;
      &lt;li&gt;foo3&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;ul class="droppable new"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
  
      $('#draggables &gt; li').draggable({
          appendTo: 'document',
          revert: 'invalid'
      });
  
      $('.droppable &gt; li').draggable({
          appendTo: 'document',
          revert: 'invalid'
      });
  
      $('#draggables').droppable({
          accept: '.droppable &gt; li',
          drop: function(event, ui) {
              ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));
              cleanUp();
          }
      });
  
      initDrop($('.droppable'));
  
  });
  
  function initDrop($element) {
  
      $element.droppable({
          accept: function(event, ui) {
              return true;
          },
          drop: function(event, ui) {
              if($(this).hasClass('new')) {
                  var clone = $(this).clone();                
                  $(this).after(clone);
                  $(this).removeClass('new');
                  initDrop( clone );
              }
              ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this));  
              cleanUp();
          }
      }).sortable({
          items: 'li',
          revert: false,
          update: function() {
              cleanUp();   
          }
      });
  
  }
  
  function cleanUp() {
  
      $('.droppable').not('.new').each(function() {
          if($(this).find('li').length == 0) {
              $(this).remove();
          }
      });
  
  }
  </code></pre>
  
  <p>Reference question: <a href="https://stackoverflow.com/questions/18399543/jquery-ui-combine-sortable-and-draggable">Jquery UI combine sortable and draggable</a></p>
  
  <p>I've been trying to use this SO question to resolve my issue as the result is exactly what I'm trying to achieve, specifically the last fiddle provided in the comments of the accepted answer, but I can't seem to figure out how to adapt it to my code considering the minor differences. For example, the fiddle in that question clones the draggable rather than dragging the actual element and unlike mine doesn't allow elements to be dragged back into the initial list.</p>
  
  <p>So any help to try to get that result for my code would be greatly appreciated.</p>
  
  <p>Also, in that example, the <code>accept</code> attribute is set as a function to return true. What is the reason for this? Doesn't that just mean it will accept anything, or any draggable element?</p>
  
  <p>EDIT: I read a couple answers that just used sortable() with the connectWith attribute, but for some reason I didn't think it did what I needed to, partly because I didn't want the initial list to be sortable as well. However, using sortable() alone seems to get the functionality I'm after but I just haven't yet adapted all the event handlers.</p>