View Full Version : Adding Draggable/Droppable to Panel

28 Jul 2011, 9:03 AM

I need to have a number of draggable and droppable images on a screen with menus at the top and sides.

I have tried to implement this using the Draggable and Droppable classes, but I am unable to add them to a Panel. It seems that items added to a Panel must be Components, whereas Draggable and Droppable extend Observable.

If I just add plain images (in the items config option) to the Panel, then they are just draggable images and can't be dropped onto one another (from what I can work out, anyhow). I need the functionality that Draggable and Droppable have, but I need them rendered in a Panel (or some sub-container of a Panel?).

Does anyone know how to achieve this?


30 Jul 2011, 12:21 PM
I've (mostly) found a solution with a little help from this tutorial: http://www.sencha.com/learn/legacy/Tutorial:Creating_new_UI_controls.

I made a class to contain the Draggables/Droppables by extending Ext.Container. Per the tutorial, I made sure that the constructor called the constructor for the superclass. I also used onRender to call onRender of the superclass.

In the constructor, I added a Div element by setting this.html. However, the Div is not present in the DOM until after the Container is rendered. So, I added an afterrender listener which then creates the Draggable/Droppable using the Div that was created in the constructor.

This mainly works, but I'm still getting some trouble with moving the Droppables. Unlike, Draggable, Droppable does not have a moveTo method, which is causing me some pain. Moving the underlying element messes up the intersection somehow. When I find a solution, I'll post more. Please let me know if you are aware of a solution...

Himmat Bhanushali
28 Sep 2011, 4:48 AM
I also have the similar problem. I want to drag and drop buttons between panels. Can you please share your code, so i can refer it. Please , reply as soon as possible

3 Feb 2012, 2:28 AM
I'm trying to do this too..