Використовуючи інтерфейс користувача jQuery для створення дерева сортуваних, droppable, ARBITRARILY-NESTED divs - jquery, jquery-ui, jquery-ui-сортує, jquery-ui-droppable

Я Noob у JavaScript намагаюся написатиПрограма інтерфейсу HTML / CSS / Javascript / jQuery / jQuery для перетягування СОРТЕБЛІЙних знаків один з одного для створення довільної структури дерева. Ви можете запустити мій поточний код за адресою 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 3 вкладений всередині div 2, а div 1 знаходиться поза обома цими div, я не можу перетягувати / переносити div 1 у div 3.
• Після деякого перетягування та скидання програма перестає дозволяти мені вводити діви в непусті диви.
• Внутрішні диви втрачають своє сортування. І якщо діви 3 і 4 вкладені всередині div 2, а div 1 знаходиться поза всіма цими дивами, то div 1 не є "сортувальним" щодо дівок 3 та 4.

Відповіді:

Я думаю, що це розширення робить те, що ви хочете зробити. Якщо ви просто не хочете кодувати навчання, перегляд вихідного коду може вам допомогти.

http://mjsarfatti.com/sandbox/nestedSortable/