Flex从入门到精通 第19章

使用拖放行为(Drag and Drop)

第19章

使用拖放行为(Drag and Drop)

在Flex应用程序中，拖放行为实现从一个组件到 另一个组件移动数据，或者移动一个组件。这体 现了RIA程序独特的优点。通过该行为，在可视的 应用程序中，用户可以在数据列表之间拖放数据， 在容器之间拖放控件，在容器之间拖放组件，来 进行重新布局。

使用拖放行为(Drag and Drop)

19.1 拖放行为概观 通常可视化的开发环境允许编程者使用鼠标选择 某个对象，并且在屏幕上进行拖动。Flex的拖放 行为可以选择一个对象，如一条在数据列表中的 选择，或者是一个容器中的图像控件，并拖放它 们放入到另一个容器中。在Flex中，可以在使用 的组件上实现拖放。有一些控件例如列表，树结 构和数据列表，这些列表类组件，已经自动实现 了拖放，可以直接使用。一个拖放行为的操作过 程有三个主要阶段：初始化、拖动和放置。

使用拖放行为(Drag and Drop)

19.2 在列表类控件上使用拖放行为 在Flex中，很多列表类控件包含了已经定义的拖 放操作。这些控件包括：数据列表(DataGrid)、 水平列表(HorizontalList)、列表(List)、 打印数据列表(PrintDataGrid)、排列列表 (TileList)和树结构(Tree)。这些控件可以 直接使用拖放行为。用户只要定义组件中的一些 属性，就可以实现拖放行为。这些属性包括： dragEnabled、dragMoveEnabled和dropEnabled。 如果要实现复制，就需要增加附加的逻辑。

使用拖放行为(Drag and Drop)

19.2.1 实现基本的列表类控件拖放行为 除了树结构控件，所有的列表类的 dragMoveEnabled属性默认值都为false,这样只 能从一个控件到另一个控件复制元素。设定第一 个控件的dragMoveEnabled属性值为true,就可以 移动和复制数据。对于树结构组件，其默认值为 true。拖放行为的唯一要求就是需要两个控件的 数据源必须是相符合的。两个控件的数据源都是 数组。可以在拖放操作中改变拖动的数据以使之 与目标控件的类型相符合。

使用拖放行为(Drag and Drop)

19.2.2 两个方向的拖放行为 编程者通过设定在两个列表控件上的dragEnabled, dropEnabled和dragMoveEnabled属性值来实现在两个方向 上的拖放。 在代码中，定义数据列表dragEnabled、dropEnabled和 dragMoveEnabled属性值均为true,代码如下所示： <mx:DataGrid id="srcgrid" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true">

使用拖放行为(Drag and Drop)

19.2.3 在同一个控件上的拖放行为 拖放行为的作用之一就是在列表类控件上拖放项目以达到重新排 列的效果。在示例19-3中，定义了一个树结构控件，用户可以拖 动树结构中的项目进行重新摆放。在代码中，设定树结构的 dragEnabled,dropEnabled属性值均为true。其dragMoveEnabled 属性的默认值已经是true,代码如下所示： <mx:Tree id="firstList" width="90%" heig

ht="80%" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" creationComplete="initApp();"/>

使用拖放行为(Drag and Drop)

19.2.4 列表控件的拖动放置属性 列表控件通过属性和方法来控制拖放操作。

使用拖放行为(Drag and Drop)

19.3 人为添加拖放行为 Flex定义了列表类控件具有默认的拖放功能。当 使用非列表类增加时，就需要人为的控制拖动和 放置事件。

使用拖放行为(Drag and Drop)

19.3.1 用来定义拖放操作的类 类 功能 DragManager 管理拖放操作，例如它的 doDrag()方法用来开始拖动的操作。 DragSource 包含被拖动数据。并且提供附 加的拖动管理功能。 DragEvent 描述使用拖放事件的事件对象。

使用拖放行为(Drag and Drop)

19.3.2 手工拖放操作步骤 下面的步骤定义了使用手工拖放行为的操作。 将一个组件定义为拖放行为的初始者有以下的方 法，非列表组件，或列表类组件的dragEnabled的 属性值为false时，组件必须可以察觉到用户企图 开始一个拖动操作，并使自己明确的成为初始者。 通常使用mouseMove或mouseDown事件来开始一个 拖动放置操作。 组件建立一个mx.core.DragSource类实体，包含 被拖动的数据，并定义数据的格式。 组件调用mx.magagers.DragManager.doDrag()方 法，来初始化拖动放置操作。

使用拖放行为(Drag and Drop)

19.3.3 手工拖放操作示例 定义了一个自定义的拖放行为。在MXML代码中， 首先定义了两个有颜色的画布，一个为红色，一 个绿色。并且定义了画布的mouseMove事件，

使用拖放行为(Drag and Drop)

19.4 拖放行为示例 这一节讲解几个不同特征的示例。

使用拖放行为(Drag and Drop)

19.4.1 使用容器作为放置目标示例 使用画布容器作为放置目标。必须定义画布的背 景颜色，否则，画布容器背景为透明，这样拖动 放置管理器就不能发现鼠标的光标位置。在程序 中，使用<mx:Image>标签加载一个可拖动的图像 到画布容器中，然后定义事件管理来拖动图片。 完整的代码如下所示，具体的每个函数的作用， 都在代码中进行了注解。

使用拖放行为(Drag and Drop)

19.4.2 设定拖动代理 可以在mouseDown或mouseUp事件管理函数内， …… 此处隐藏：1958字，全部文档内容请下载后查看。喜欢就下载吧 ……