Dragging Items From a TileList Control To A Container

Previously, I had described how to use the TileList control and how to use click and drag-and-drop with the TileList to drag items from one TileList to another TileList (see below for related blog entries). I had a couple of major capabilities still to complete for my Flex 2.0 demonstration app: provide the user the capability to remove an item from the cart TileList and add the capability for the user to specify the quantity of a specific book item in the cart TileList. This blog entry will describe how I added the capability to remove an item from the cart TileList.

You can view the new version of the TileList Flex demo application (right click to view source). Here is how I modified the previous TileList demo application to enable the user to remove items from the Book Orders Cart TileList.

I added a new BookOrder ActionScript class. A BookOrder object is created when the user drags a book from the book TileList to the cart TileList. The BookOrder has an itemID which holds the ISBN for the book. It also has a qty field, which I'll need for my next version (enable user to change quantity). Each BookOrder object is added to the cart Array Collection (cartAryCol). (Side note: in the previous demo I was creating Book objects each time the user dragged a Book to the cart TileList. However, for the cart objects I don't need all the fields that are in the Book class and I do need a quantity field, so a different class was needed to better represent the cart objects.)

Next I enabled drag operations for the cart TileList. The user can now grab and drag one cart TileList child item at a time. The dragMoveEnabled="true" means the item will be removed from the cart TileList upon a successful drop.

allowMultipleSelection="false" dragMoveEnabled="true" dragEnabled="true"

The difficult part of this phase of the demo's design was to create a component to be the recipient of the drop. If you are not using one of the Flex 2.0's components that includes built-in support for drag-and-drop operations, then you have to manually add the drag-and-drop functionality to the component. Chapter 29 in the Flex 2.0 Developer's guide discusses how to manually add drag-and-drop support. Even better, Aral Balkan has written a short tutorial on drag-and-drop operations, which includes how to manually add drag-and-drop capabilities. See: http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/

I followed Aral's example in creating my drop component. I used a Box component that contains an image and a Label. Of course this is not the most attractive solution, so for a production application, I'd have to develop something the looks much more appealing.

borderStyle="solid" borderColor="#ff0000" backgroundColor="#FFFFFF"

width="184" height="35" horizontalAlign="center" verticalAlign="middle"
      fontSize="8" borderThickness="2"




<mx:Image source="assets/delete.gif" />
<mx:Label text="Drag Book Here To Remove From Cart" fontSize="8" height="12" width="175">


To enable the cartTrash Box container to be the drop recipient, I specified three events and listener functions to handle each event. The dragEnter event occurs "when a drag proxy [a cart TileList child item] moves over the target from outside the target."

private function dragEnterHandler(event:DragEvent):void

      // Get the drop target component from the event object.       var dropTarget:Box=event.currentTarget as Box;

      //change the cartTrash Box to       //visually signal to the user that they can       //drop the cart item there
      dropTarget.setStyle("borderThickness", 5);
      dropTarget.setStyle("backgroundColor", "#FFCC00");
      // Accept the drop

In the function that handles the dragEnter event I get the identity of the drop target (cartTrash Box), change the look of the Box, and tell the DragManager this is a valid drop target. In Aral's example he adds code to check the type of item being dragged to the drop recipient and only allows the drop if the item is a correct drag item. I did not do that in this demo application since it doesn't matter what item the user is trying to drop in the cartTrash Box.

The dragDrop event occurs "when the user releases the mouse over the target." The function that handles the dragDrop event is where I remove the cart TileList child item from the cartAryCol (the array storing each BookOrder object).

private function dragDropHandler(event:DragEvent):void

   //need to remove this cart //BookOrder item from the cartAryCol    
   var items:Array = event.dragSource.dataForFormat("items") as Array;

//Alert.show( items[0].itemID );
//send the itemID to the function //to remove it from the cartAryCol
removeFromCart( items[0].itemID );
   //Change the cartTrash Box back to its //original look
}//end function drapDropHandler

private function removeFromCart( cartItemID:String):void {
   //loop through the cartAryCol until we find the    //BookOrder object with a matching itemID    
   for (var i:int = 0; i < cartAryCol.length; i++) {
    if ( cartAryCol[i].itemID == cartItemID ) {
    }//end if    
   }//end for loop    
}//end class removeFromCart

In the dragDrogHandler function I get the itemID value for the cart TileList child item (items[0].itemID) that was dropped onto the cartTrash Box. Since I've disabled multiple item selection in the cart TileList, there is only one item in the array, which will be in position 0 of the array. I send that itemID to the function removeFromCart. In the removeFromCart function I loop through the cartAryCol and compare the itemID values. If I find a match, I remove that item from the cartAryCol.

Next step - Add a way for the user to increase/decrease book item quantities.

BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.