Posts in Category "Drag and Drop"

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/ – Custom Panel component that adds the minimize/restore functionality, and dispatches a ‘resizeButtonClicked’ event to the main app to handle resizing.

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

You can download the source code for these examples.

Drag and Drop documentation update

We rewrote the Drag and Drop chapter of the Flex Developer’s Guide. The main changes were:

– Simplified the explanation of the drag/drop operation
– Added many new examples
– Added information and examples on performing a copy operation with the list-based controls (Tree, List, DataGrid) which is not handled by default
– Added information about overriding the default event handlers used by the list-based controls

Download the new chapter’s PDF: Using Drag and Drop

Here’s a ZIP file of all the code samples (full applications) used in the document: Code Samples.