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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值