Flex拖动实现方法.docVIP

在交互性要求较高的系统中，拖动是一种比较常用的技术，例如，我们经常用到权限定制、数据导入导出定制等功能，这种情况下，一般是目标数据集合已经确定，用户需要从已有的集合中选择条目，使用拖动完成实现起来比较直观，友好；有些场景下需要允许容器内的元素能够自由拖动，例如一些图形设计工具。在Flex中，它本身就提供了很多支持拖动的特性，很多情况下，这些特性能够简化我们的开发，但是也有一些情况是需要我们自定义实现的。本文介绍了三种flex中进行拖动的方法。 方法一：List中数据的拖动 ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/2006/mxml layout=absolute ????mx:List dragEnabled=true width=162 labelField=Name ????????mx:Array ????????????mx:Object Name=Item a/ ????????????mx:Object Name=Item b/ ????????????mx:Object Name=Item c/ ????????/mx:Array ????/mx:List ????mx:List dropEnabled=true x=196 y=0 width=171 labelField=Name ????/mx:List /mx:Application 通过指定List的dragEnabled=true来允许List控件数据支持拖动，指定dropEnabled=true来允许List控件支持接受拖动数据。 方法二：容器中控件的拖动 这种方式下控件的拖动有两种方法，一种是利用Flex自身的实现，一种是使用自定义的实现。对于Flex内的所有可视控件，都支持startDrag()和stopDrag()方法，我们通过定制相应的事件即可完成拖动的操作。例如： ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/2006/mxml layout=absolute mx:Script ????![CDATA[ ????????import mx.core.UIComponent; ????????private function start(e:MouseEvent):void ????????{ ????????????var component:UIComponent=e.currentTarget as UIComponent ????????????component.startDrag(); ????????} ????????private function stop(e:MouseEvent):void ????????{ ????????????var component:UIComponent=e.currentTarget as UIComponent ????????????component.stopDrag(); ????????} ???????? ????]] /mx:Script ????mx:Canvas x=0 y=0 width=100% height=100% ????????mx:Button x=237 y=69 label=Button mouseDown=start(event) mouseUp=stop(event)/ ????????mx:CheckBox x=424 y=49 label=Checkbox mouseDown=start(event) mouseUp=stop(event)/ ????????mx:Image x=344 y=138 mouseDown=start(event) mouseUp=stop(event)/ ????????mx:Label x=267 y=233 text=Label mouseDown=start(event) mouseUp=stop(event)/ ????????mx:TextInput x=412 y=196 mouseDown=start(event) mouseUp=stop(event)/ ????/mx:Canvas /mx:Application 第二种方法就是自定义拖动的实现，主要的原理就是：在控件mouseDown之后，给所处的container注册mouseMove和mouseUp事件及处理函数；mouseMove的时候计算鼠标移动的值，然后将控件坐标做相应的改变，mouseUp的时候移除mo