Flex兑现拖拽效果
Flex实现拖拽效果
1. acceptDragDrop()方法
public static function acceptDragDrop(target:IUIComponent):void如果接受拖/放数据，将从 dragEnter 事件处理函数调用此方法。例如：
DragManager.acceptDragDrop(event.target);
当<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. 复制
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>