Dragging and dropping containers (eg. Panel) in Flex

I was following the Drag and Drop tutorial by Adobe and trying to implement a drag and drop example using Panels (instead of an Image like in the example). It seems there is something extra you need to do to get containers to drag and drop correctly as compared with images. Specifically, the ‘dragEnter’ handler needs to be a little different than the example in order to allow dragging of Panels as opposed to Images. Notice what I had to change below:

Adobe example code (dragging an Image):

private function dragEnterHandler(event:DragEvent):void


// Get the drop target component from the event object.

var dropTarget:Box=event.currentTarget as Box;

// Accept the drag only if the user is dragging data

// identified by the 'value' format value.

if (event.dragSource.hasFormat('value'))


// Make the border of the Box thicker to

// visually signal to the user that they can

// drop the coin there.

dropTarget.setStyle("borderThickness", 5);

// Accept the drop.




My own code (dragging a Panel):

private function middleDragEnterHandler(event:DragEvent):void {

var dragTarget:VBox = event.currentTarget as VBox;                                                                                                                                                  dragTarget.setStyle("backgroundColor", "#FFFFFF");

DragManager.acceptDragDrop(event.currentTarget as IUIComponent);


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s