Встречался с такой проблемой. Я это делал через JQuery, у них очень просто все в этом плане, правда есть небольшие ньюансы:
1. У вас должны быть 2 функции (можете объединить в одну если удобней). Одна функция создает нод и дает ограничения по передвижению этого нода внутри Вашей панели. Например
$("#panel").append('<div class="node"'+' id="myNode">');
$("#panel div.node").draggable({containment: [20, 30, 200, 300]});
Вторая функция должна будет управлять всеми нодами и их ограничениями по передвижению
function restrictDraggable(targetNodes, outerObject){
$(outerObject).children(targetNodes).draggable({containment: [$(outerObject).offset().left, $(outerObject).offset().top, $(outerObject).width(), $(outerObject).height()]});
}
это конечно грубая версия, но примерно так. Когда вы бросаете ноду с тривью в панель или другую ноду (которой надо будет Вам вручную добавить возможность чтобы в нее можно было бросать) Вы задаете ей параметры через Первую функцию (то есть вы возвращаете то что бросили обратно в тривью и создаете ноду как в первой функции). Вторую же функию Вы используете для того чтобы ограничивать передвижение внутренних нодов. Т.е. в опции stop Вашего нода в котором есть ноды Вы перепрописываете разрешенные координаты передвижения:
options.stop = function(event,info) {
restrictDraggable('#'+movableNodes[this.id], '.node');
}
таким образом все будет держать друг друга. У меня удалось создать такую схему за несколько часов благодаря JQuery и плагину Draggable. Надеюсь поможет и Вам :)
