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>