title: A container that is sortable, droppable and draggable
body: <p>This question related to jQuery's UI. </p>
  
  <p>Can anybody provide an example the does the following:</p>
  
  <ol>
  <li>Container A is sortable and droppable</li>
  <li>Any element can be dragged into Container A and then sorted. </li>
  <li>Any element can be dragged out of Container A and then simply become draggable around the page.</li>
  <li>Container A is also draggable around the page</li>
  </ol>
  
  <p>This is what I have so far:</p>
  
  <pre><code>$(function() {
      $("#sortable").sortable().droppable();
      $("#sortable").disableSelection();
      $("#drop").droppable({
          accept: "#sortable li",
          drop: function (evt, ui) {
              var $destination = $(this); 
              ui.draggable.appendTo( $destination ); 
  
          }
      }).draggable();
  });
  </code></pre>
  
  <p>I created a fiddle here:
  <a href="http://jsfiddle.net/eEJHb/1/" rel="nofollow">http://jsfiddle.net/eEJHb/1/</a></p>
  
  <p>Problems that I'm running into:
  A) I can't get the sortable to drop into the container
  B) Once in the container, I need the element to be draggable back to the sortable list</p>
  
  <p>Thanks for your help!</p>
  
  <p><em><strong></em> UPDATE **</strong>
  Part of my problem lied in option "connectWith". It simply wasn't working. Instead, I used the option "connectToSortable" (as an option in the draggable) and I was able to get the sortable and draggable working together. </p>