Flex 3.0中drag和drop操作

Flex 3.0中drag和drop操作 

 

      drag和drop操作让你把Flex 应用程序中数据从一个控件移到另一个控件里，它在一个可视化应用程序里使你在两个列表间拖动数据，拖动容器里的控件到新的位置或者在容器之间拖动Flex组件是特别有用的。
       关于 drag和drop
       可视化开发环境典型的让你在一个应用程序里通过使用鼠标选中它并在屏幕周围移动它们等方法操纵对象。drag和drop让你选中一个对象，比如一个列表控件中的项目，或者向图像控件这样的Flex控件，然后拖动它跨越另一个组件把它加到别的组件中。
       你可以为所有的Flex组件都支持drag和drop。Flex也包括内置支持drag和drop操作的一定量的控件，比如像列表控件，树形控件，及数据网格，它们自动操作一些必要的处理来支持拖放操作。
       关于拖放操作
       拖放操作有三个主要阶段：开始，拖和放：
       开始阶段：用户通过使用鼠标选择一个Flex组件，或Flex组件的一个项目开始拖放操作，然后按住鼠标移动控件或项目。例如，一个用户用鼠标选择了一个列表控件的项目，按住鼠标按钮，移动鼠标几个像素。在这个例子中的被选中的组件就是拖开始。
       拖阶段：当依旧按住鼠标按钮时，用户在Flex应用程序的周围移动鼠标。Flex在拖动阶段显示一个图像，被称为拖代理，一个拖动源对象（DragSource类的实例）包含了被拖动的数据。
       放阶段： 当用户在Flex组件上移动拖代理，这个组件变成一个可能的放目标。放目标检查拖动源对象来确定带格式的数据是否被目标接受。如果可以接受，就允许用户放数据到放目标。如放目标决定这个数据不是一个可接受的格式，放目标不允许拖动对象的数据放到自己这里。
       一个拖放操作从拖开始到放目标既可以复制也可以移动数据。在成功的放下，Flex就增加数据到放目标中，如在移动的情况下，应该删除拖开始中的数据。
       如下图显示了一个列表控件作为拖开始，而且另一个列表控件作为放目标。在这个例子中，你使用拖和放来移动拖开始中的Television列表项数据到放目标中：
实例如下 ：在两个列表控件之间移动数据
       源代码如下：

Code
 1<?xml version="1.0" encoding="utf-8"?>
 2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" pageTitle="SimpleListToListMove" creationComplete="initApp();">
 3    <mx:Script>
 4        <![CDATA[
 5            // 主要是设置List控件中的dropEnabled，dragEnabled，dragMoveEnabled等属性
 6            import mx.collections.ArrayCollection;
 7            private function initApp():void{
 8                srclist.dataProvider=new ArrayCollection(['阅读','电视','电影']);
 9                destlist.dataProvider=new ArrayCollection([]);
10            }
11        ]]>
12    </mx:Script>
13    <mx:Panel title="My Application" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
14        <mx:HBox width="100%">
15            <mx:VBox width="50%">
16                <mx:Label text="Available Activities"/>
17                <mx:List id="srclist" allowMultipleSelection="true" dragEnabled="true"
18                 dragMoveEnabled="true" width="100%"/>
19            </mx:VBox>
20            <mx:VBox width="50%">
21                <mx:Label text="Activities I Like"/>
22                <mx:List id="destlist" dropEnabled="true" width="100%"/>
23            </mx:VBox>
24        </mx:HBox>
25        <mx:Button id="b1" label="Reset" click="initApp()"/>
26        
27    </mx:Panel>
28</mx:Application>
29