One of the first things you might notice in the above code is the references to the icons as the source for the images. Well we are going to embed these into the application. To do this we are going to add a Script tag to our application and embed the images into the appropriate variables of type Class. The first iteration of our Script tag is below.

<mx:Script>
  <![CDATA[

  [Embed("assets/bioshock_small.png")]
  private var bioshock_icon:Class;
 
  [Embed("assets/crysis_small.png")]
  private var crysis_icon:Class;
 
  [Embed("assets/halo_small.png")]
  private var halo_icon:Class;
 
  [Embed("assets/neverwinternights_small.png")]
  private var neverwinter_icon:Class;
 
  [Embed("assets/wow_small.png")]
  private var wow_icon:Class;
  ]]>
</mx:Script>

The datagrid in the interface has the dataProvider property bound to the variable called cartContents which also needs to be added to our list of variables. We will later add the items dropped in our basket to the cartContents ArrayCollection.

[Bindable]
private var cartContents:ArrayCollection = new ArrayCollection();

Getting into the meat of the tutorial we are going to look at the functions that take care of creating and accepting the drag and drop actions. First we look at the function doDrag which starts the drag and drop action.

private function doDrag(event:MouseEvent):void
{
  var img:Image = event.currentTarget as Image;
  var dragImg:Image = new Image();
  dragImg.source = img.source;
 
  var dsource:DragSource = new DragSource();
  dsource.addData(img, 'img');
 
  DragManager.doDrag(img, dsource, event, dragImg);
}

Starting off I first get the image that is being clicked on. This is pulled simply by using the currentTarget of the event. We then create an image to use for the drag indicator and set the source to same thing as the image being dragged. Next I create a DragSource which is an object to hold data that needs to be passed with the drag event. I add a single piece of data which is a reference to the image being clicked and name the data "img" - which is the name I will later pull it out with. All that is left to do is actually start the drag event using the function doDrag on the DragManager class. I need to pass the object that is initializing the drag, the data source, the mouse event, and image for the drag indicator. That takes care of starting the drag.

Previous 1 2 3 Next Print