ExtJS Drag and Drop?

Question

[llxff]

Подскажите, как можно организовать примерно такую схему:


Есть TreeView и 5 панелей.


Из TreeView можно кидать ноды в любую панель

+ эти ноды в панели можно перемещать между собой

+ есть такая нода, в которую так же можно кинуть другую ноду из TreeView.


Смотрел всякие примеры и делал по ним, но убивает просто, что получается сложно и все время такое чувство, что можно это сделать гораздо проще.

Answer 1

[pratamishus]

Встречался с такой проблемой. Я это делал через 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. Надеюсь поможет и Вам :)

Comments

[pratamishus]

P.S. '<div class=«node»'+' id=«myNode»>' — это написал так чтобы показали код :)

[llxff]

Спасибо. Я уже думал над этим, но хочется таки «въехать» в DD ExtJs)