flex拖放功能

增加拖放功能

视觉开发环境典型地让您操作对象在应用程序中使用鼠标选择他们并在屏幕上四处移动。Flex拖放管理器让您选择一个对象，譬如List组件里的一个item（选项），或者是一个image（图片）组件，然后拖拽它到其他组件而添加到这个组件上。所有的Flex组件都支持拖放操作。Flex中的某些控件的附加功能也包括拖放操作，譬如List,Tree,和DataGrid。

拖放操作有三个主要阶段: 初始化, 扯拽, 释放。

初始化

用户创始拖放操作由使用鼠标选择一个导Flex组件或组件内的某一个选项（item）,然后持续的按住鼠标移动组件或选项。例如，用户用鼠标选择List中的选项，当持续按着鼠标键，移动几个像素。被选择的组件称为drag initiator（拖拽创始者）。

拖拽

当持续按着鼠标键, 用户在Flex应用程序上移动鼠标时。Flex显示一个图象在拖拽的时候, 是drag proxy(拖拽代理器)。Drag source(拖拽来源)(DragSource 对象) 包含别拖拽的数据。

释放

当用户把drag proxy(拖拽代理器) 移动到在其它Flex组件, 那个组件成为一个可能的drop target(释放目标对象)。drop target(释放目标对象)能检查拖拽的来源的数据格式是否是目标所能接受的, 如果那样, 让用户把数据释放到组件上，如果释放目标对象的数据不是在一个可接受的格式, 释放目标对象可能禁止释放操作。

成功的释放操作, Flex添加数据到目标对象，在原始的位置删除它。

这个快速入门的提供几种方法在你的Flex的应用程序中实现拖拽操作。

这个快的开始描述实施拖放操作几个方式在您的Flex应用程序。

在List控件中使用拖放

几个Flex组件包括内置对拖放操作的支持。其中有DataGrid 、HorizontalList 、List、Menu、PrintDataGrid 、TileList, 和Tree 组件。

您可以生成drag initiators（拖拽创始者）并设置 dragEnabled属性值为 true。同样, 您能设置这些组件的释放对象的dropEnabled属性值为 true。Flex让您通过拖拽移动选项从允许拖拽的组件到允许释放的组件, 或按下Ctrl通过拖拽来复制他们。

通过拖拽操作来复制选项

以下例子让您通过拖拽从List到另一个List复制选项。您能多次从drag initiator（拖拽创始者）到drop target(释放目标对象)拖拽来复制同样选项。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
     width="365" height="225"
     creationComplete="creationCompleteHandler();"
>
    <mx:Script>
        <![CDATA[
                 private function creationCompleteHandler():void
                 {
                     srclist.dataProvider = [&apos;Reading&apos;, &apos;Skating&apos;, &apos;Movies&apos;];        
                     destlist.dataProvider = [];
                 }
        ]]>
    </mx:Script>
    <mx:Panel title="Select activities" layout="horizontal">
        <mx:VBox width="50%">
            <mx:Label text="Available activities"/>
            <!-- Drag initiator -->
            <mx:List
                id="srclist" width="100%" height="100"
                 allowMultipleSelection="true"                
                 dragEnabled="true"
            />
        </mx:VBox>
        <mx:VBox width="50%">
            <mx:Label text="Activities I enjoy"/>
            <!-- Drop target -->
            <mx:List
                id="destlist" width="100%" height="100"
                 dropEnabled="true"
            />
        </mx:VBox>
    </mx:Panel>
</mx:Application>

 

---

使用拖放操作移动选项

属性dragMoveEnabled 的默认值为 false, 只让您复制选项从List控件到其他的List。如果您修改上面的例子，在来源List组件增加 dragMoveEnabled 属性并设置为true, 您能移动和复制元素, 如下所示。

默认动作是移动选项，复制选项, 持续按着鼠标在释放操作期间。

例子

 

<!-- Drag initiator -->
<mx:List 
    id="srclist" width="100%" height="100" 
     allowMultipleSelection="true"                
     dragEnabled="true"
     dragMoveEnabled="true"
/>