Creating Resizable and Draggable Flex Components

I wanted users of a Flex application to be able to move and resize components at runtime so that the user could lay out the components however they wanted. This application lets the user move, resize, and minimize Panel containers much in the way you can in any windowing environment. While this application uses Panel containers, you could generalize it to for any Flex components.

To use it:

– Click down in the header area of a Panel to drag it around the application. Release the mouse when it is where you want it.

– Click down on the lower-right corner of the Panel to resize it. Release the mouse when it is the size you want. You can not set it to a size smaller than 50 pixes high and 150 pixels wide.

– Click the Minimize/Restore icons to hide/show the body area of the Panel.

The following application shows this functionality:

This application uses three files:

* CanvasDD.mxml – Main app that handles the drag/drop and resizing events. Resizing works for any component that dispatches a ‘resizeButtonClicked’ event; there is nothing in the Panel needed to resize it except the logic to determine when to dispatch the ‘resizeButtonClicked’ event.

* myComponents/DragPanel.as – Custom Panel component that adds the minimize/restore functionality, and dispatches a ‘resizeButtonClicked’ event to the main app to handle resizing.

* myComponents/RubberBandComp.as – Custom UIComponet that draws the rubber band on top of a Panel during resizing.

You can download the source code for these examples.

41 Responses to Creating Resizable and Draggable Flex Components

  1. Phillip Kerman says:

    Neat.The ‘x’ cursor gets locked on the edge when you drag out of the window.There’s no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.Otherwise, looks good.

  2. Very nice work! I just happen to have finished my extension of the Flex Panel component which has similar functionality. link. It doesn’t have the rubberband effect but I personally think it’s not a manditory thing. Keep up the great work!

  3. This is on the lines what I am looking for. What was your reasoning of not simply placing the Draggable Canvas (which does the dragging) as the parent of the DragPanel class instead of a Panel Object? This way the component will be a little more plug-n-play…I am developing an apollo Dashboard program that has multiple draggable panel sbased on different business metrics (panel for accounting, panel for HR etc) so I need it to be extensible and easily reusable. Any shortcomings you can think of?

  4. Stephen Gilson says:

    In the app that I built this prototype for, I wanted to be able to add as many Panels to the Canvas container as necessary. When you create a custom MXML component from a container, and that container has children defined in the custom component, you can only add more children programmatically by calling addChild().So, if I built a custom Canvas container named MyDragCanvas.mxml as:<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”><mx:Panel …/><mx:Panel …/><mx:Panel …/></mx:Canvas>When I used in in the application, I could not add more Panels to it in MXML – so this would cause a compiler error:<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”><mx:MyDragCanvas><!– You cannot add children in MXML –><mx:Panel …/><mx:Panel …/></mx:MyDragCanvas></mx:Application>Stephen

  5. Okay… back again. I created a mod of your example simplifying it a bit. It kinda deviates from your whole Drag-n-Drop premise and goes in a more mouseevent listener direction… I didn’t want to have the outline of the image I was dragging but the actual image,I didn’t want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file…Here is the Mod ExampleHere is the Source ViewYour original code helped out a lot… Still have a couple of hours of modding this, but in the end it will be a nice component to reuse. Thanks so much… really inspired me.

  6. I updated my SuperPanel flex extension to version 1.5. Check it out overhere.

  7. Thanks for this very good article … Can i translate this and insert on my site in Poland? … Thanks and Greetings

  8. sohbet says:

    This is on the lines what I am looking for. What was your reasoning of not simply placing the Draggable Canvas (which does the dragging) as the parent of the DragPanel class instead of a Panel Object? This way the component will be a little more plug-n-play…

  9. Stephen Gilson says:

    You can modify this example to make any component draggable – I used Panel because it ade a nice demo, but there was nothing special about it.Stephen

  10. Bank zdjec says:

    I didn’t want to have the outline of the image I was dragging but the actual image,I didn’t want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file…

  11. didn’t want to have the outline of the image I was dragging but the actual image,I didn’t want to have to add anything to the parent object, and I wanted

  12. Marc Hughes says:

    I’ve been working on a library to allow user moving & resizing of objects on screen. It’s called ObjectHandles and you can find it over at:http://www.rogue-development.com/objectHandles.xml

  13. sharp aquos says:

    Neat.The ‘x’ cursor gets locked on the edge when you drag out of the window.There’s no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.Otherwise, looks good.

  14. sohbet says:

    I’ve been working on a library to allow user moving & resizing of objects on screen. It’s called ObjectHandles and you can find it over at:

  15. woo, great.I like these graggable pannel. although ajax can do it, but aways occurs some errors.

  16. stranger says:

    Hi,I have included the DragPanel.as file in my assets directory. But i am creating a panel at run time in my application using action script. How can i create a new instance of this DragPanel.Though i insert it andsay var zonePanel:Panel = new DragPanel(), its not working.Any help in this.Thanks in AdvanceStranger

  17. Stranger says:

    Hi,I am able to create these Panels at run time. But when i try to drag and drop the panel, it gets sticked to the cursor and the panel keeps on moving until i move the cursor till i refresh the whole page.What could be the problem.ThanksStranger.

  18. cam balkon says:

    When I used in in the application, I could not add more Panels to it in MXML – so this would cause a compiler error:

  19. cwong says:

    Hello to the Flex Doc Team,I’m new to this flex builder. From the Flex Builder 2 sample flexstore on the drag&drop function, at the flexstore product’s view I’m able to drag the phone box and drop to the compare or cart’s box. I’ve look on the ProductCatalogThumbnails.mxml which is the canvas drag box of the phones and Productlist.mxml which is its drop location from the compare and shopping cart’s canvas.I’ve tried successfully on the drag&drop single images based on the list-based controls TileList. However as I’m looking at the flexstore, I can drag the canvas (phone) and drop it to the canvas (cart or compare).What I would like to know is how to make the canvas drag&drop into other canvas. I see there are some similiarity from the simple drag-and-drop operation for a nonlist-based control example but if I want to drag&drop with image and label, from one canvas to another canvas, how to do it? Could you please help me on this?regards,cwong

  20. Stephen says:

    regarding the comment from cwong:Hi,A good place to start it to take a look at the drag and drop doc here: http://livedocs.adobe.com/flex/3/html/dragdrop_1.htmlThere are several examples using a Canvas container, including the ones on these pages:- “Example: Simple drag-and-drop operation for a nonlist-based control” on http://livedocs.adobe.com/flex/3/html/dragdrop_5.html- “Example: Using a container as a drop target” on page http://livedocs.adobe.com/flex/3/html/dragdrop_7.html- “Moving and copying data for a nonlist-based control” on page http://livedocs.adobe.com/flex/3/html/dragdrop_8.htmlStephen

  21. resimler says:

    Phillip Kerman said:The ‘x’ cursor gets locked on the edge when you drag out of the window.Well it is not such a big problem I think. The windows are dragable and resizable, thus very effective and user friendly.Ken Derren

  22. Rana Issa says:

    Hello,I would like to thank you first of all for providing the code, and having such a nice code to drag-and-drop panels. I am working on making a TitleWindow to drag-and-drop in a big application. I followed the way you provided. In a small prototype, it works very well, but when I try to make the same in the original application, I don’t get an error, but the titlebar moves (having the mouse pointer with an x).I was told that the event is not bubbling up to the Application, so the event is not reaching to the drop point. But I don’t know how to solve it. Do you have any idea how to do that? Or if you think the reason maybe another issue?Many thanksRana

  23. When I used in in the application, I could not add more Panels to it in MXML – so this would cause a compiler error

  24. HGH says:

    The ‘x’ cursor gets locked on the edge when you drag out of the window.There’s no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.Otherwise, looks good.

  25. medyum says:

    I created a mod of your example simplifying it a bit. It kinda deviates from your whole Drag-n-Drop premise and goes in a more mouseevent listener direction… I didn’t want to have the outline of the image I was dragging but the actual image,I didn’t want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file..medyum

  26. Tanaji says:

    I would like to thank you first of all for providing the code, and having such a nice code to drag-and-drop panels.But i have another problem if i am minimize one panel and size of another panel autometically not maximize

  27. K Wright says:

    Very nicely done. But it seems if you remove the ‘backgroundColor’ setting from the Canvas, then you can no longer drag the panel outside the boundries of itself!Is this an issue with this code in particular, or a more genral bug?

  28. Stephen Gilson says:

    K Wright said:”…if you remove the ‘backgroundColor’ setting from the Canvas, then you can no longer drag the panel…”Containers need a background color to support drag and drop. You can find more information here: http://livedocs.adobe.com/flex/3/html/dragdrop_7.htmlStephen

  29. I didn’t want to have the outline of the image I was dragging but the actual image,I didn’t want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file…

  30. Vik says:

    The app is great and works fine but do you have a similar example for dragging and dropping images and then resizing or rotating those dropped images. If you can point me to some easy tutorial then it would be of great help.

  31. kicha says:

    This is great. But is it possible to save the state of the panel so that when the application is opened next time, the panels should be placed at the position when it was closed and not reset to its original position.

  32. Stephen Gilson says:

    kicha said: “.. is it possible to save the state of the pane … l”You can use local shared objects to save and load the status of the panels. You can find more info here: http://learn.adobe.com/wiki/display/Flex/Shared+ObjectsStephen

  33. This is great. But is it possible to save the state of the panel so that when the application is opened next time, the panels should be placed at the position when it was closed and not reset to its original position.

  34. Stephen Gilson says:

    @Papaz: You can use local shared objects to store the state of each panel as it is moved, then read the local shared object back when the app loads the next time.

  35. Sagar Ganatra says:

    I’m using the same in an AIR application. I mean the same code I have copied to create an AIR app, but this doesn’t work. It fails to move the panel. Can you please let me know if there is anything else required?

  36. Atul Prakash says:

    @SagarI’m facing the same problem.Please let me also know if u find some solution to run this in AIR app…Thanx

  37. Kadın says:

    When I used in in the application, I could not add more Panels to it in MXML – so this would cause a compiler error:

  38. Tez says:

    Thanks for this very good article … Can i translate this and insert on my site in Poland? … Thanks and Greetings

  39. Kavi says:

    Hi,

    Can any one please tell me how to minimize the titlebar to the bottom of the screen…?

    the given demo shows minimize the contorl to the top of panel…

    when the user clicks the minimize button, it should goes to bottom of the screen…

    • Stephen Gilson says:

      Sure, just set the x,y position of the Panel to a location at the bottom of the screen in the minPanelSizeHandler() event handler. You will have to keep track of any panels already there so they do not lay on top of each other.