Flex4 拖拽功能

Flex的拖拽效果看起来很效果很棒，本文演示了将一个图片拖拽到另一个图片上面的功能。

实现效果如图所示：

源代码为：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"     
      >
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->  
 </fx:Declarations>
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.core.BitmapAsset;
   import mx.core.DragSource;
   import mx.core.UIComponent;
   import mx.effects.*;
   import mx.events.DragEvent;
   import mx.managers.DragManager;   
   
   [Embed(source="graphics/BlackNeonAgua_164.png")]
   [Bindable]
   private var bookImage:Class;
   private var bookProxy:BitmapAsset = BitmapAsset(new bookImage());
   
   private function initiateDrag(event:MouseEvent):void{
    var source:DragSource = new DragSource();
    var itemData:Object = event.target;   
    source.addData(itemData,"bookItem");
    DragManager.doDrag(itemData as UIComponent,source,event,bookProxy,0,0,0.5);
   }
   private function dragEnterHandler(event:DragEvent):void{
    if(event.dragSource.hasFormat("bookItem")){
     DragManager.acceptDragDrop(event.target as UIComponent);
    }
   }
   private function dragDropHandler(event:DragEvent):void{
    var dragData:Object=event.dragSource.dataForFormat("bookItem");
    var initiator:UIComponent = event.dragInitiator as UIComponent;
    
    Alert.show("Drag Successful!");
   }
   
  ]]>
 </fx:Script> 

 <mx:Image x="461" y="127" source="{bookImage}" mouseDown="initiateDrag(event)"/>
 <mx:Image x="617" y="127" source="@Embed('graphics/BlackNeonAgua_211.png')"
     dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)"/>
 
</s:Application>