Использование пользовательского интерфейса jQuery для создания дерева сортируемых, отбрасываемых, ПРОИЗВОЛЬНО Вложенных элементов div.

Я новичок в Javascript и пытаюсь написать HTML/CSS/Javascript/jQuery/jQuery UI-программу для перетаскивания SORTABLE div друг из друга для создания произвольной древовидной структуры. Вы можете запустить мой текущий код по адресу http://jsfiddle.net/randomhittingking/5S7v7/. Часть Javascript

$(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>");
      }
    }
  );
});

У меня есть несколько проблем, таких как:

• Я не могу перетаскивать div во внутренние div. Например, если div 3 вложен в div 2, а div 1 находится вне обоих этих div, то я не могу перетащить div 1 в div 3.
• После некоторого перетаскивания программа перестает позволять мне перетаскивать div в непустые div.
• Внутренние div теряют свою сортируемость. И если элементы div 3 и 4 вложены внутрь элемента div 2, а элемент div 1 находится вне всех этих элементов div, то элемент div 1 не «сортируется» по отношению к элементам div 3 и 4.