Flex4组件间处理：拖放.ppt

第11章Flex4组件间处理 拖放 11 1拖放行为概述 11 2在列表类组件中使用拖放 11 3对非列表类组件使用拖放 11 1拖放行为概述 11 1 1拖放过程1 初始化用户通过使用鼠标选中一个Flex组件 或组件中的某一个选项 按住鼠标移动组件或选项移动 发起一个拖放操作 2 拖动当按住鼠标按键 用户在Flex应用程序中移动鼠标 Flex显示一个表示正在拖放的图片 这个图片代表拖放对象 称为 拖动代理 Dragproxy 3 放下当一个用户移动 拖动代理 划过一个Flex组件的时候 这个组件有可能变成 放下目标 Droptarget 11 1 2拖放事件 Flex中的拖放操作涉及的类主要有以下几个 1 DragManager 管理拖放操作 2 DragSource 确定并且储存那些被拖放的数据 3 DragEvent 响应拖放事件 Flex中的拖放操作涉及的事件主要有以下几种 1 mouseDown和mouseMove mouseDown事件在用户通过按住鼠标键选择一个组件时派发 标移动时派发 2 dragEnter 当一个拖放代理从目标组件外移动到目标组件上时派发 一个组件成为一个放下目标时必须为这个事件定义一个监听器 3 dragDrop 当鼠标在目标上释放时派发 4 dragOver和dragExit dragOver事件当用户在目标组件上移动鼠标时派发 dragExit事件当用户拖动代理移出目标组件 并且没有放置数据时派发 5 dragComplete 在一个拖放操作完成时派发 11 1 3支持拖放的组件 用户只要定义组件中的一些属性 就可以实现拖放操作 涉及如下几个属性 1 dragEnabled 2 dragMoveEnabled 3 dropEnabled 11 1 3支持拖放的组件 对于非列表类组件或dragEnabled属性值设为false的列表类组件 需要人为控制拖动和放下事件 实现的原理如下所示 1 对于没有dragEnabled属性的组件 必须使组件能够接收到用户已经开始启动一个拖放操作 然后使其明确成为一个拖动初始者 2 当鼠标处于按下状态时 用户可以拖动鼠标 Flex则显示移动的拖动代理图像 3 如果用户将拖放代理移动到一个Flex组件上 则Flex派发一个dragEnter事件到这个准放下目标 4 dragEnter事件监听器将检查DragSource对象 以便决定拖放数据是否是可接受的格式 5 如果放下目标拒绝放下 放下目标组件的父级链中组件将逐一被检查 从而检测是否有可以接受释放数据的组件 6 如果放下目标或者其父组件中的一个组件可以接受放下 当用户在目标上移动代理时 Flex派发一个dragOver事件 7 如果用户放弃在放下目标上放下数据 并且一直没有松开鼠标同时将拖放代理移动到释放目标之外 则Flex派发一个dragExit事件 放下目标可以处理这个事件 8 如果用户在放下目标上松开鼠标 则Flex派发一个dragDrop事件 然后放下目标的dragDrop事件监听器添加拖放数据到目标中 9 如果拖放操作完成 则Flex派发一个dragComplete事件 拖放初始者可以处理这个事件 11 2在列表类组件中使用拖放 11 2 1基本拖放在panel容器中定义两个List组件sl和dl sl作为拖放初始者 dl则作为放下目标 将sl的dragEnabled和dragMoveEnabled属性值都设为true 表示运行拖出和移动数据 将dl的dropEnabled属性值设为true 表示允许放下数据 代码如下 11 2 1基本拖放 初始化sl和dl中的数据源 代码如下 11 2 1基本拖放 程序执行后显示初始状态如图11 1所示 从第一个列表中选中一个选项并按住鼠标拖动 效果如图11 2所示 拖动到另一个列表后的效果如图11 3所示 11 2 2双向拖放 如果将两个列表类组件的dragEnabled dragMoveEnabled和dropEnabled属性值都设为true 则可以实现双向拖放行为 例如 在数据表格组件中实现双向拖放行为的示例代码所示 程序执行后 选中 列表1 中的几行数据拖动到 列表2 再从 列表2 中拖动数据到 列表1 中 如图所示 11 3对非列表类组件使用拖放 11 3 1实现拖放1 新建组件新建Panel容器和Button组件 Button组件的位置设于Panel容器外 代码如下 在移动Button组件时派发mouseMove事件 调用dragSource 函数初始化拖放操作 11 3 1实现拖放 2 拖放初始化在定义触发的事件处理函数前引入要使用的类 代码如下 importmx events DragEvent importmx core DragSource importmx managers DragManager importflash events MouseEvent 定义实现初始化拖放操作的dragSource 函数 代码如下 privatefunctiondragSource e MouseEvent void CurrentTarget指定要实现拖放的初始化目标vardragInitiator Button Button e currentTarget vardragSource DragSource newDragSource 向对象添加拖放数据dragSource addData x e localX y e localY button DragManager doDrag dragInitiator dragSource e 11 3 1实现拖放 3 拖放到目标上当Button组件拖动到Panel容器上 鼠标未释放时调用onEnter 函数 代码如下所示 privatefunctiononEnter e DragEvent void 如果标号为已经设定的标号 button 则接受拖来的物体if e dragSource hasFormat button DragManager acceptDragDrop Panel e target DragSource对象的hasFormat 方法检测数据对象中是否包含所请求的格式 如果有则返回true 否则返回false 参数为指定数据格式的标签 11 3 1实现拖放 4 放下数据当目标接受拖动对象 并且用户在面板容器上放下鼠标时触发dragDrop事件 调用onDrop 函数 代码如下所示 privatefunctiononDrop e DragEvent void varmyData Object newObject myData e dragSource dataForFormat button btn x this mouseX myData x btn y this mouseY myData y 在onDrop 函数中设置Button组件中心的位置为鼠标所在的位置 则Button组件从Panel容器外移动到了Panel容器中 11 3 1实现拖放 程序完整代码所示 程序执行结果如图所示 11 3 2设置拖放代理 拖动代理是在拖动组件时显示的图像 可以在mouseDown和mouseMove事件处理函数内 DragManger类的doDrag 方法中自定义拖动代理 例如 要对前面11 3 1节中拖动的Button组件设置一个拖动代理 只需要修改dragEnter事件触发的dragSource 函数 并在该函数中定义一个拖动图像 代码所示 在定义图像对象前需要引入图像类 代码如下 importmx controls Image 程序的执行结果如图所示 11 3 3处理放置与退出 当用户拖动组件到放下目标上并移动鼠标时将触发dragOver事件 可以忽略这个事件 也可以用这个事件为用户提供反馈 参数feedback设