title: Using jQuery UI to make a tree of sortable, droppable, ARBITRARILY-NESTED divs
body: <p>I’m a Javascript noob trying to write an HTML/CSS/Javascript/jQuery/jQuery UI program to drag and drop SORTABLE divs in and out of one another to make an arbitrary tree structure. You can run my current code at <a href="http://jsfiddle.net/randomhittingking/5S7v7/" rel="nofollow">http://jsfiddle.net/randomhittingking/5S7v7/</a>. The Javascript part is</p>
  
  <pre><code>$(document).ready(function(){
      $(".node").sortable({
          receive: function(event, ui){}
      });
    $(".node").droppable(
      {
        greedy: true,
        drop: function(event, ui){
          var dropped = ui.draggable;
          var droppedOn = $(this);
          dropped.remove();
          droppedOn.append("&lt;div class=\"node\"&gt;" + dropped.html() + "&lt;/div&gt;");
        }
      }
    );
  });
  </code></pre>
  
  <p>I have several problems, such as:</p>
  
  <ul>
  <li>I can’t drag divs into inner divs. For example, if div 3 is nested inside div 2 and div 1 is outside both these divs, then I can’t drag/drop div 1 into div 3. </li>
  <li>After some dragging and dropping, the program stops letting me drop divs into nonempty divs.</li>
  <li>Inner divs loose their sortability. And if divs 3 and 4 are nested inside div 2 and div 1 is outside all these divs, then div 1 is not “sortable” with respect to divs 3 and 4.</li>
  </ul>