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.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>