Flex实现拖拽效果

1. acceptDragDrop()方法
public static function acceptDragDrop(target:IUIComponent):void如果接受拖/放数据,将从 dragEnter 事件处理函数调用此方法。例如:
DragManager.acceptDragDrop(event.target);


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     <mx:Script>
           <![CDATA[
                import mx.containers.Box;
                import mx.containers.Canvas;
                import mx.events.DragEvent;
                import mx.managers.DragManager;
                import mx.core.DragSource;
                import mx.core.IUIComponent;
                private static const FORMAT:String ="box";
                private function mouseDownHandler(evt:MouseEvent):void
                {
                     var initiator:IUIComponent = evt.currentTarget as IUIComponent;
                     var dragSource:DragSource = new DragSource();
                     dragSource.addData(initiator,FORMAT);//向拖动源添加数据和相应的格式
                     DragManager.doDrag(initiator,dragSource,evt);
                }
                private function dragEnterHandler (evt:DragEvent):void
                {
                     if(evt.dragSource.hasFormat(FORMAT)){//如果数据源包含所有的数据
                           //如果是box类型就接受拖拽
                          DragManager.acceptDragDrop(Canvas(evt.currentTarget));
                     }
                }
                private function dropHandler(evt :DragEvent):void{
                     var box:Box = Box(evt.dragInitiator);//启动拖动的组件。
                     box.x=evt.localX;
                     box.y=evt.localY;
                }
           ]]>
     </mx:Script>
     <mx:Canvas
           id="canvas"
           backgroundColor="#b4b4b4"
           width="300" height="300"
           dragEnter="dragEnterHandler(event);"
           dragDrop="dropHandler(event);">
           <mx:Box id="dragItem"
                width="20" height="20"
                backgroundColor="#534"
                mouseDown="mouseDownHandler(event);">
                
           </mx:Box>
     </mx:Canvas>
</mx:Application>

当<mx:Box>实例调度mouseDown事件的时候,mouseDownHandler方法则被调用,并且一个DataSource数据对象被添加到DragManager中,DragManager.doDrag方法启动一个拖拽的操作,需要输入至少三个参数,拖拽启动器项目的引用,一个DragSource对象,以及调用事件处理器并包含有光拖拽操作鼠标参数的MouseEvent对象。
Canvas 组件通过对DragManager所调度的dragEnter和dragDrop事件设置事件处理器,因此这个Canvas组件被认为是Box组件所启动的拖放动作的目标,在dragEnterHandler方法中,检查拖拽源数据格式,并使用DragManager对象的静态acceptDragDrop方法使放置动作生效,其中拖拽数据源的数据格式最初是在doDrag方法中设置的,acceptDragdrop方法的参数是相应拖拽事件(例如drapDrop事件)的拖放目标。应用程序中的dropHandler方法相应放置动作,并基于鼠标按键放开时的指针位置,来决定移动过来的启动器(在这边就是box组件)的位置。
2. 复制
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
     <mx:Script>
           <![CDATA[
                import mx.containers.Box;
                import mx.containers.Canvas;
                import mx.events.DragEvent;
                import mx.managers.DragManager;
                import mx.core.DragSource;
                import mx.core.IUIComponent;
                private static const FORMAT:String ="box";
                private function mouseDownHandler(evt:MouseEvent):void
                {
//                     var initiator:IUIComponent = evt.currentTarget as IUIComponent;
                           var initiator:Box = evt.currentTarget as Box;
                           var boxData:Object = new Object();
                           boxData.width=initiator.width;
                           boxData.height=initiator.height;
                          boxData.backgroundColor=initiator.getStyle("backgroundColor");
                    var dragSource:DragSource = new DragSource();//存放着拖拽中的数据
                     dragSource.addData(boxData,FORMAT);//向拖动源添加数据和相应的格式
                     DragManager.doDrag(initiator,dragSource,evt);
                }
                private function dragEnterHandler (evt:DragEvent):void
                {
                     if(evt.dragSource.hasFormat(FORMAT)){//如果数据源包含所有的数据
                           //如果是box类型就接受拖拽
                          DragManager.acceptDragDrop(Canvas(evt.currentTarget));
                     }
                }
                private function dropHandler(evt :DragEvent):void{
//                     var box:Box = Box(evt.dragInitiator);//启动拖动的组件。
//                     box.x=evt.localX;
//                     box.y=evt.localY;
                                var boxData:Object= evt.dragSource.dataForFormat(FORMAT)
                                //检索指定格式的数据。如果此数据是使用 addData() 方法添加的,则可以直接返回此数据。如果此数据是使用 addHandler() 方法添加的,则需调用处理程序函数来返回此数据。
                                //参数  format:String — 字符串,用于指定一个标签来描述要返回的数据的格式。
                                 var box:Box = new Box();
                                box.width=boxData.width;
                                box.height=boxData.height;
                                box.setStyle("backgroundColor",boxData.backgroundColor);
                                box.x=evt.localX;
                                box.y=evt.localY;
                                //添加监听的方法
                                box.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
                                canvas.addChild(box);
                }
           ]]>
     </mx:Script>
     <mx:Canvas
           id="canvas"
           backgroundColor="#b4b4b4"
           width="300" height="300"
           dragEnter="dragEnterHandler(event);"
           dragDrop="dropHandler(event);">
           <mx:Box id="dragItem"
                width="20" height="20"
                backgroundColor="#534"
                mouseDown="mouseDownHandler(event);">
               
           </mx:Box>
     </mx:Canvas>
</mx:Application>

你可能感兴趣的:(Adobe,DragManager)