Has anyone implemented or seen a "horizontal" drag-and-drop of items within an Ext Panel?

LabKey Support Forum (Inactive)
Has anyone implemented or seen a "horizontal" drag-and-drop of items within an Ext Panel? Leo Dashevskiy  2012-05-16 14:02
Status: Closed
 
This has way less to do with LabKey, I realize, but you guys look like a very knowledgeable bunch, so I am giving it a shot here. May be you can direct me to some useful resources about this...

The layout of my panel is "column" so that when I add items to it sequentially via the panel.items.add() call, iterating through my input array and generating each iteration an appropriate object to add, the objects (all the same height) show up in the panel just the way I want them, they overflow: the panel width is fixed, if there is not enough room on the current line at the end of it for next object to be added, then the panel's height increases and the last object is added as the first on the new line. Now this left to right, then carry-over to the beginning of the next line and go left to right again, flow is important to the design.

The idea now is to empower this with drag and drop ability, so that any element can be dragged and dropped in between horizontally-wise any other two objects and so that all of the objects "to the right" (including all of the lines below) shift right to make space for the object being dragged and dropped. Hopefully, I am making myself clear here.

Thanks.
 
 
Nick Kerr responded:  2012-05-16 14:20
Hi Leo,

There are several helpful resources that I find for drag/drop.

Ext 3.4: http://dev.sencha.com/deploy/ext-3.4.0/examples/#sample-14
Ext 4.0: http://dev.sencha.com/deploy/ext-4.0.1/examples/#sample-9
Saki (Ext 3.4) : http://examples.extjs.eu/

I think I know what you are describing, but we do not have an example of implementing panels that move on drag-over in LabKey. We implement drag/drop in the tree panel, which is going to be pretty different from what you are looking to build, but it could help. Search for FolderManagementPanel.js in our core/webapp/admin folder.

Thanks,
Nick
 
Leo Dashevskiy responded:  2012-05-16 16:13
Ok, thanks Nick, will ponder on all of this...