Dragging and Dropping Between a DataGrid and a List

In the last task in describing the dropEnabled property the following sentence was used, "When TRue, the user can drop items onto the control using the default drop behavior." So what is this "default drop behavior"? Basically it means that Flex will try to figure out what should be dropped and do what it thinks is best, but that might not be what you want. In the last task it was clear to Flex that when dragging from one DataGrid to another, the columns in the drop target DataGrid should be filled with like-named properties from the DragSource data.

In this task you will drag from a DataGrid to a List component. In this case the "default drop behavior" won't know what data to drop into the List and will dump the whole object into the List, which is not what you want.

In this case, you have to use a drag event to get the data that you want into the List. Here is a summary of the events for both the drag initiator and the drop target:

Drag Events for the Drag Initiator	Description
mouseDown and mouseMove(MouseEvent class)	Although not drag events, these MouseEvent class events are used to start the drag-and-drop process when not using dragEnabled components. The mouseDown event is broadcast when the user selects a control with the mouse and holds down the mouse button. The mouseMove event is broadcast when the mouse moves.
dragComplete event (DragEvent class)	Broadcast when a drag operation completes, either when the drag data drops onto a drop target or when the drag-and-drop operation ends without performing a drop operation.

Drag Events for the Drop Target (all events of the DragEvent class)	Description
dragEnter	Broadcast when a drag proxy moves over the target from outside the target.
dragOver	Broadcast while the user moves the mouse over the target, after the dragEnter event.
dragDrop	Broadcast when the mouse is released over the target.
dragExit	Broadcast when the user drags outside the drop target, but does not drop the data onto the target.

Now it is time to get to work.

1.	Examine the code in the Task2_DG_to_List.mxml file and then run it. Drag from the DataGrid to the List; you will see [object Object] appear in the List. The default drop behavior did not know what data you wanted placed in the List, so it dropped the whole data object in. Because the List cannot display the entire object, it lets you know what has happened by displaying [object Object]. The following example shows the default behavior when dragging from DataGrid to the List.
2.	Add a dragDrop event listener to the List, and call a function named doDragDrop() in the ActionScript executed when the event is broadcast. Pass the event object as a parameter to the function. <mx:List width="200" dropEnabled="true" dataProvider="{targetListDP}" dragDrop="doDragDrop(event)"/> The event is named dragDrop, and you have no control over that. The function name doDragDrop() is a good choice for the function name, but it can be named whatever you choose.
3.	At the bottom of the <mx:Script> block, create a private function named doDragDrop() data typed as void. The function should accept a parameter named event data typed as DragEvent. Also import the class mx.events.DragEvent. This function will be called when the user drops the drag proxy onto the List, which is the drop target in this application. Later in this task, you will write code in this function to display just the name of the product in the List.
4.	As the first line of code in the function, create a variable local to the function named dgRow data typed as Object and set equal to a new Object. var dgRow:Object=new Object(); This variable will be used to store information about the row dragged from the DataGrid and stored in the DataSource object.
5.	As the second line of code in the function, set the dgRow variable equal to the data in the DragSource object associated with the items format. Use the dataForFormat() method. dgRow=event.dragSource.dataForFormat("items"); The dataForFormat() method is a method of the DragSource class. It retrieves from the DragSource object the data associated with the particular formatin this case, items. Note Remember that the format name associated with data in a DataGrid is always items.
6.	Set a breakpoint at the closing brace of the doDragDrop() function. You do this by double-clicking in the marker bar just to the left of the line numbers in the editor. You will see a small blue dot appear to indicate the breakpoint was set. The breakpoint will cause Flex Builder to halt execution at the marked line of code, and you will be able to check values of variables. You will learn more about the debugger in Lesson 25, "Debugging and Optimizing Flex Applications."
7.	Debug the application and drag a row to the List. When you drop the drag proxy, the process flow will return to Flex Builder and then you should view the Debugging perspective. Examine the dgRow variable value in the Variables view. You should then see that the variable contains all the data from that DataGrid row. The following example shows the row of data being dragged. Notice that the variable contains an array of length 1, which means you have only 1 index, which is 0. Also note that the name property contains the name of the product. Tip If you want to allow the user to drag multiple rows of data, set the DataGrid multipleSelection property equal to TRue.
8.	Terminate the debugging session by clicking the red box in either the Debug or Console views. Return to the Development perspective by clicking on the chevron (>>) in the upper-right corner of Builder and selecting that perspective. Normally, the Development perspective is best to work in because you can see so much more of your code.
9.	As the third line of code in the function, add the name of the product to the List by using the addItem() method of the List's dataProvider. Remember that the dgRow variable contained an array of length 1, so use dgRow[0].name to reference the name. targetList.dataProvider.addItem(dgRow[0].name); This is a case in which viewing how the data is stored using the debugger is very helpful in retrieving the information.
10.	Run the application and drag from the DataGrid to the List. You should see the product being placed in the List, but [object Object] also appears. The event continued to do what it was supposed to do, even though you displayed some different data; hence you still see the reference to the object.
11.	As the last line in the function, use the event class' preventDefault() method to cancel the event default behavior. event.preventDefault(); In this case, you can cancel the default behavior. Not all events can be canceled; you must check the documentation for definitive answers on an event-by-event basis. By cancelling this event, you prevent the display of [object Object] in the List.
12.	Run the application. When you drag from DataGrid to List, only the name of the product appears in the List. This wraps up our second task in this lesson on drag and drop.