flex中的拖放操作（一）

在家上网赚钱更容易

可视化的开发环境最大的特点是允许你在一个应用程序中通过鼠标的选择、移动，灵活地处理屏幕上的对象。Flex Drag and Drop Manager 可以选择一个对象（如 List 控件中的数据项）或者一个 Flex 控件（如 Image 控件），然后拖拽它到其他组件或者将其数据添加到其他组件中。

所有的 Flex 组件都支持 drag-and-drop 操作。Flex 也对一些组件提供了特殊的附加支持，如 List，Tree 和 DataGrid。

 

drag-and-drop 操作

drag-and-drop 操作有三个主要的步骤：初始化，拖拽和释放。下面的段落从大的角度描述三个步骤。

初始化（Initation）：用户初始化 drag-and-drop 操作通过鼠标选择一个组件或者组件中的数据项，然后按住鼠标键不放，移动组件或数据项。例如，用户选择了一个List控件中的数据项，按住鼠标键，移动鼠标几个像素。这个被选择的组件称为拖拽初始器（drag initiator）。

拖拽（Drag）：按住鼠标键时，用户在Flex程序中移动鼠标。Flex 在拖拽过程中显示一个图像，称为拖拽代理（drag proxy）。拖拽源（drag source）（一个 DragSource 对象）包含被拖拽的数据信息。

释放（Drop）：当用户移动拖拽代理到其它 Flex 组件之上，那个组件成为一个可能的释放目标（drop target）。释放目标会检查拖拽源，确认其中的数据是否与目标所接受的目标结构相一致。如果一样，允许用户可以将数据释放到组件里；否则释放目标会拒绝释放操作。

紧接着一个成功的释放操作，Flex 在目标中添加数据，同时（可选的），在数据原来的位置删除它。

list-based控件使用 drag-and-drop

下面的控件包含了对 drag-and-drop 操作的内置的支持：

• DataGrid
• PrintDataGrid
• Tree
• Menu
• List
• HorizontalList
• TileList

将这些控件转变为拖拽初始器，你需要做的是将 dragEnabled 属性设置为 true。你没有必要定义一个事件侦听器来启动一个拖拽操作。Flex 允许你通过拖拽将数据项从一个 drag-enabled 控件移动到一个 drop-enabled 控件，或者按住 Control 键同时拖拽数据项来复制他们。

这些控件提供了一些属性和方法来管理 drag-and-drop 操作。下面的表格列举了部分属性和

属性	描述
dragEnabled	控件是否允许拖拽操作，默认为false
dropEnabled	控件是否允许释放操作，默认为false
dragMoveEnabled	拖拽数据是否移动到接受控件中，值为false时表示复制，默认为false

 

下面的简单例子展示了如何从一个 List 控件复制数据项到另一个 List 控件：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

<mx:Script>

     <![CDATA[

            private function initApp():void {    

             srclist.dataProvider = ['Reading', 'Television', 'Movies'];

             destlist.dataProvider =[];

         }

     ]]>

</mx:Script>

     <mx:List id="srclist" height="100" allowMultipleSelection="true" dragEnabled="true"/>

     <mx:List id="destlist" height="100" dropEnabled="true" x="271" y="0"/>

</mx:Application>

 

通过将第一个 List 中 dragEnabled 属性设置为 true，第二个List的 dropEnabled 属性设置为 true，你就可以让用户将数据项安全的从第一个 List 拖拽到第二个 List。

因为 dragMoveEnalbe 属性默认值是 false，你目前只是从一个 List 复制数据项到另一个。如果你修改例子将第一个 List 的 dragMoveEnabled 设置为 true，你可以移动数据项，就像下面的例子显示的：

    <mx:List id="srclist" height="100" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"/>

 

默认的操作是移动数据项。如果想复制数据项，在拖拽时按住 Control 键。

如果你打算实现双向的拖拽，可以将两个列表的 dragEnabled 属性和 dropEnabled 属性设置为 true，如下：

 

 

    <![CDATA[

         private function initApp():void {

             srclist.dataProvider = ['Reading', 'Television', 'Movies'];

             destlist.dataProvider =[];

         }

     ]]>

<mx:List id="srclist" height="100" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"/>

<mx:List id="destlist" height="100" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"/>

 

下面的例子演示了使用 DataGrid 替换 List 达到同样的效果：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

<mx:Script>

            <![CDATA[

             private function initApp():void {

                 srcgrid.dataProvider =

                    [

                                 { Artist:'Carole King', Album:'Tapestry', Price:11.99},

                         { Artist:'Paul Simon', Album:'Graceland', Price:10.99},

                         { Artist:'Original Cast', Album:'Camelot', Price:12.99},

                         { Artist:'The Beatles', Album:'The White Album', Price:11.99}

                     ];

                 destgrid.dataProvider =[];   

             }

            ]]>

</mx:Script>

     <mx:DataGrid id="srcgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" x="43" y="142"/>

    <mx:DataGrid id="destgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" x="383" y="142" width="250"/>

</mx:Application>

 

 

上面就是在flex中内置组件支持的拖放效果和操作的方法，flex还有自定义的拖放方法，下回在说说自定义拖放的操作。

在家上网赚钱更容易