HOME > Flex > Flex Example on Drag and Drop functionality
Objective : Create a simple to understand example on 
drag-and-drop functionality of the Flex UI component,
such as Label, Panel etc.

Tools/Frameworks used:
1. Adobe Flex SDK 3.5
2. Text Editor


Example Description:
A screen having a Label and two Panels. The Label is 
initially placed in one of the two Panels, and is 
made drag-and-drop enabled by writing specific coding
ActionScript and MXML files.

Before doing code walk through let us discuss some of
the basic and interesting points about drag-and-drop
functionality in Flex.

1. The component that is to be moved from one component
   to same or another component within an Application,
   there should be an event such as mouseMove.
   This mouseMove event triggers a method that is defined
   within the MXML tag of the component, and this method
   should execute two basic functionalities, such as 
   initiating a DragSource and the currentTarget (the 
   component that is to be dragged) attached to this
   DragSource using one of its addData method.
   This can be thought of as a means of taking data with 
   a name associated with the data.
    addData(component, "name")
   And then by calling DragManager.doDrag(component, 
   dragSource,event), thus starting drag operation.
2. The component that is designed to receive this component 
   as part of drop operation should define the events such
   as dragEnter and dragDrop.

In this example two Panel components are supposed to receive
and react as part of drag-and-drop activity or functionalities
for the Label component.

Just to begin with a simple example, I have listed following
code :



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import mx.controls.Label;
      import mx.managers.DragManager;
      import mx.core.DragSource;
      import mx.events.DragEvent;
      
      private function mouseMoveHandler(evt:MouseEvent):void {
          var ds:DragSource = new DragSource();
          var label:Label = Label(evt.currentTarget);
          ds.addData(label,"lblMove");
          DragManager.doDrag(label,ds,evt);
      }
      private function dragEnterHandler(evt:DragEvent):void {
        if(evt.dragSource.hasFormat("lblMove")) {
            var panel:Panel = Panel(evt.currentTarget);
            DragManager.acceptDragDrop(panel);
        }
      }
      private function dragDropHandler(evt:DragEvent):void {
        var lbl:Label = Label(evt.dragSource.dataForFormat("lblMove"));
        evt.currentTarget.addChild(lbl);
      }
    ]]>
  </mx:Script>
  <mx:Panel title="Panel 1" width="200" 
            height="100" dragEnter="dragEnterHandler(event)" 
                         dragDrop="dragDropHandler(event)">
    <mx:Label text="Move me please" 
                 mouseMove="mouseMoveHandler(event)"/>
  </mx:Panel>
  <mx:Canvas width="100" height="50"/>
  <mx:Panel title="Panel 2" id="mvPanel" 
            width="200" height="100" 
            dragEnter="dragEnterHandler(event)" 
            dragDrop="dragDropHandler(event)">
  </mx:Panel>
</mx:Application>



I have compiled this file and is working fine at least 
one browser I tested with.

DISCLAIMER :
The content provided in this page is not warranted and/or guaranteed by techienjoy.com. 
techienjoy.com is not liable for any negative consequences that may result/arise from 
implementing directly/indirectly any information covered in these pages/articles/tutorials.

All contents of this site is/are written and provided on an "AS IS" basis,
without WARRANTIES or conditions of any kind, either express or implied, including, without
limitation, merchantability, or fitness for a particular purpose. You are solely responsible
for determining the appropriateness of using or refering this and assume any risks associated
with this.

In spite of all precautions taken to avoid any typo in these pages, there might be some 
issues like grammatical mistakes and typos being observed in these pages, techienjoy.com
extends sincerest apologies to all our visitors for the same.