现在的位置: 首页 > 综合 > 正文

Flex 实现组件拖曳(一)

2014年01月31日 ⁄ 综合 ⁄ 共 2440字 ⁄ 字号 评论关闭

 

Code:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.                xmlns:s="library://ns.adobe.com/flex/spark"   
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="100%" height="100%">  
  5.     <s:layout>  
  6.         <s:HorizontalLayout verticalAlign="middle"/>  
  7.     </s:layout>  
  8.     <fx:Declarations>  
  9.         <!-- 将非可视元素(例如服务、值对象)放在此处 -->  
  10.     </fx:Declarations>  
  11.       
  12.     <fx:Script>  
  13.         <![CDATA[ 
  14.             import mx.core.DragSource; 
  15.             import mx.core.IUIComponent; 
  16.             import mx.events.DragEvent; 
  17.             import mx.managers.DragManager; 
  18.             private static const FORMAT:String = "box"; 
  19.              
  20.             private function mouseDownHandle(evt:MouseEvent):void { 
  21.                  
  22.                 var initiator:IUIComponent = evt.currentTarget as IUIComponent; 
  23.                 //DragSource 类中包含正被拖动的数据 
  24.                 var dragSource:DragSource = new DragSource(); 
  25.                 //addData(data:Object, format:String):void向拖动源添加数据和相应的格式 String。 
  26.                 dragSource.addData(initiator, FORMAT); 
  27.                 //启动拖放操作。 
  28.                 //dragInitiator:IUIComponent — 指定启动拖动的组件的 IUIComponent。 
  29.                 //dragSource:DragSource — 包含正在拖动的数据的 DragSource 对象。 
  30.                 //mouseEvent:MouseEvent — 包含与启动拖动相关的鼠标信息的 MouseEvent 
  31.                 DragManager.doDrag(initiator, dragSource, evt); 
  32.             } 
  33.              
  34.             private function dragEnterHandle(evt:DragEvent):void { 
  35.                 //如果数据源中包含请求的格式,则返回 true;否则,返回 false。 
  36.                 if(evt.dragSource.hasFormat(FORMAT)) {           
  37.                     DragManager.acceptDragDrop(Canvas(evt.currentTarget)); 
  38.                 } 
  39.             } 
  40.             private function dropHandle(evt:DragEvent):void { 
  41.                 //确定拖动后的位置 
  42.                 var box:Box = Box(evt.dragInitiator); 
  43.                 box.x = evt.localX; 
  44.                 box.y = evt.localY; 
  45.             } 
  46.         ]]>  
  47.     </fx:Script>  
  48.     <mx:Canvas id="canvas"  
  49.                backgroundColor="0xEEEEEE"  
  50.                width="80%" height="80%"  
  51.                dragEnter="dragEnterHandle(event);"  
  52.                dragDrop="dropHandle(event);">  
  53.         <mx:Box id="dragItem"   
  54.                 width="20%" height="20%"  
  55.                 backgroundColor="0x00FFCC"  
  56.                 mouseDown="mouseDownHandle(event);" />  
  57.     </mx:Canvas>  
  58.       
  59. </s:Application>  

 

抱歉!评论已关闭.