ExtJS Drag and Drop?

Question

ExtJS/Sencha

Prompt how it is possible to organize approximately such scheme:
There is TreeView and 5 panels.
From the TreeView, you can throw nodes into any panel
+ these nodes in the panel can be moved between themselves
+ there is such a node in which you can also throw another node from the TreeView.
I watched all sorts of examples and did according to them, but it just kills that it turns out to be difficult and all the time it feels like it can be done much easier.

Answer 1

I met with such a problem. I did it through JQuery, they have a very simple everything in this regard, although there are small nuances:
1. You must have 2 functions (you can combine them into one if more convenient). One function creates a node and gives restrictions on the movement of this node within your panel. For example , the second function will have to manage all the nodes and their movement restrictions
$("#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()]});
}
This is of course a rough version, but something like this. When you throw a node with a triview into a panel or another node (which you will need to manually add the ability to throw into it) you set its parameters through the First function (that is, you return what you threw back into the triview and create a node as in the first functions). You use the second function to restrict the movement of internal nodes. Those. in the stop option of your node in which there are nodes you overwrite the allowed movement coordinates: this way everything will keep each other. I was able to create such a schema in a few hours thanks to jQuery and the Draggable plugin. Hope it helps you too :)
options.stop = function(event,info) {
restrictDraggable('#'+movableNodes[this.id], '.node');
}