0.13 Drag and drop basics  (Page 6/8)

Listing 11 adds the image being dragged to a new DragSource object and provides an identifier for the format as a string. You will see later how this string is used to establish the drop target.

Initiate the drag and drop operation by calling the doDrag method

Listing 12 initiates the drag and drop operation by calling the static doDrag method of the DragManager class.

What does the documentation have to say about the DragManager class?

Here is part of what the documentation has to say about the DragManager class.

"The DragManager class manages drag and drop operations, which let you move data from one place to another in a Flex application. For example, you can select anobject, such as an item in a List control or a Flex control, such as an Image control, and then drag it over another component to add it to that component.

All methods and properties of the DragManager are static, so you do not need to create an instance of it. ...

When the user selects an item with the mouse, the selected component is called the drag initiator. The image displayed during thedrag operation is called the drag proxy.

When the user moves the drag proxy over another component, the dragEnter event is sent to that component. If the component accepts the drag, it becomes the drop targetand receives dragOver, dragExit, and dragDrop events.

When the drag is complete, a dragComplete event is sent to the drag initiator."

What about the doDrag method?

The documentation states simply that the doDrag method

"Initiates a drag and drop operation."

The doDrag method parameters

The doDrag method has several parameters with default values in addition to the three shown in Listing 12. Here is part of what thedocumentation has to say about the three parameters passed to the doDrag method in Listing 12.

• dragInitiator :IUIComponent - IUIComponent that specifies the component initiating the drag.
• dragSource :DragSource - DragSource object that contains the data being dragged.
• event:MouseEvent - The MouseEvent that contains the mouse information from the start of the drag.

The end of the mouseDown event handler

Listing 12 signals the end of the mouseDown event handler. This leaves two more event handlers to be discussed. The remaining two eventhandlers were registered on the drop target ( Canvas object) by the code in Listing 8.

The dragEnter event handler

As you learned earlier , when the user moves the drag proxy over another component, that component dispatches a dragEnter event.

If a dragEnter event handler has been registered on that component, the handler method is executed. If the code in the event handleraccepts the drag, it becomes the drop target and receives dragOver , dragExit , and dragDrop events.

In this case the intended drop target is the Canvas object and the event handler shown in Listing 13 is registered on that object.