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事件管理函数内， DragManager类的doDrag()方法中定义拖动代理。 如果没有定义拖动代理，则使用默认的代理图像。 在ActionScript代码中，在mouseOverHandler函 数中，定义了拖动图像，使用15x15像素的图像为 拖动代理，代码如下：

使用拖放行为(Drag and Drop)

19.4.3 对放置目标的dragOver和dragExit事件进行管理

当用户在一个使用了dragEnter事件，并且调用 DragManager.acceptDragDrop()方法的放置目标 上移动鼠标时，dragOver事件被触发。dragOver 是可选的，在拖放操作中不是必须要被定义。 dragOver事件用来定义用户在放置目标上移动鼠 标的视觉效果。例如可以使用 DragManager.showFeedback()方法来定义在拖动 代理中的一个拖动的回应标记。 当用户移动拖动代理离开了放置目标，但没有在 目标上上放

置数据时触发dragExit事件。在此事 件中可以恢复在dragOver事件管理器中进行的改 变。

使用拖放行为(Drag and Drop)

19.5 移动和复制数据 这一节讲解任何在拖放操作中实现移动和复制。

使用拖放行为(Drag and Drop)

19.5.1 移动和复制 当移动数据时，在放置目标中增加时，在拖动初 始者中删除数据。使用dragDrop事件增加数据， 使用dragComplete事件删除数据。 对于列表类控件，不需要做任何附加的工作，控 件处理所有的工作。 对于非列表类控件，需要实现dragComplete事件 在拖动初始者中删除数据，在目标组件中实现 dragDrop事件来在组件中增加事件。 复制数据与移动数据不同的是在拖动初始者中不 删除数据。无论是列表类控件还是非列表类控件 在复制数据时都需要在目标组件中实现dragDrop 事件。

使用拖放行为(Drag and Drop)

19.5.2 在列表控件和数据列表之间移动或复制数据

在不同类型的列表类控件中，移动或复制数据。 在dragDrop事件的处理中来实现不同控件的数据 格式的转换。 首先在MXML代码中，定义了一个列表控件和一个 数据列表控件，列表控件作为拖动初始者，定义 其dragMoveEnabled属性值为false,这样得到结 果是数据的复制。 <mx:List id="srcList" dragEnabled="true" dragMoveEnabled="false"/>

使用拖放行为(Drag and Drop)

19.5.3 在非列表类控件之间移动或复制数据 当拖动操作完成时，在拖动初始者上触发 dragComplete事件，在此事件中可以完成当拖动 完成时的清理工作。在拖动操作中移动的对象是 原始数据的一个复制，因此，需要在 dragComplete事件中对原始的数据进行处理。可 以通过行为对象的行为属性来确定拖动操作的类 型是否是复制或者移动。 是在从一个画布容器向另一个画布容器拖动图片 的例子。在示例中通过不同的拖动操作，可以移 动图片控件，也可以同按下键盘上的“Control” 键来实现复制图片。如果只是移动图片在第一个 画布容器中的图片就会被删除。

本文来源：https://www.bwwdw.com/article/hqym.html