Page History

...

Drag and Drop in FlexJS is accomplished using beads. When you add the beads to components, you enable them to have some part of them to be dragged and/or act as a drop target. This document will show you how to add the code necessary to make it all work.

DragMouseController

The DragMouseController is the bead you add to a component strand to activate dragging. This will not, by itself, cause anything to be dragged. What it will do is enable special events to be dispatched from the strand which you can catch and use.<example here>.

<js:Group id="bucketGroup">
    <js:beads>
        <js:DragMouseController />
    </js:beads>
    <!-- components in the group -->
</js:Group> 

In this example, a Group has the DragMouseController in its bead list. When the Group is instantiated, set up a listener for the "dragStart" event:

bucketGroup.addEventListener("dragStart", handleDragStart);

The event handler needs to do three things:

1. Determine which item is being dragged. This is most likely the event.target - one of the members of the Group.
2. Set the DragEvent.dataSource with the data that represents the item being dragged.
3. Set the DragMouseController.dragImage to a component that represents the item being dragged. Most often this will be a similar component or one made to look like it.

DragEvent.dataSource = (event.target as MyObject).data;
var dragImage:Label = new Label();
dragImage.text = (event.target as MyObject).toString();
DragMouseController.dragImage = dragImage;

In this example the event.target is cast to a class called "MyObject" which has a data property and that becomes the dragSource. Then a dragImage is created as a simple Label with the Label text being a string representation of the object selected. You can make any UI component or component composite a dragImage.

Once that has been set up in the "dragStart" event handler, the DragMouseController bead takes over and displays the dragImage as you move around the screen.

DropMouseController 

Use DropMouseController with the component strand that will accept the drop from the drag source strand. This can be the same component if you want to use drag and drop to re-arrange a strand's children. The DropMouseController emits its own events, such as "dragEvent" and "dragDrop". You can use these events to provide feedback to the user (such as adding a border when the dragImage enters the drop target space). 

The "dragDrop" event is the event to handle when the user releases the mouse over the strand with the DropMouseController bead. You use this event to incorporate the data being dragged into the target component.

<js:Group id="dropZone">
    <js:beads>
        <js:DropMouseController dragDrop="handleDrop(event)" />
    </js:beads>
</js:Group>

Lists using the SingleSelectionDragSourceBead and SingleSelectionDropTargetBead along with SingleSelectionDragImageBead.