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 http://jsfiddle.net/randomhittingking/5S7v7/. The Javascript part is

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("<div class=\"node\">" + dropped.html() + "</div>");
      }
    }
  );
});
I have several problems, such as:

  • 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.
  • After some dragging and dropping, the program stops letting me drop divs into nonempty divs.
  • 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.