首页 / 脚本样式 / ExtJS / GWT-Ext体验之旅，第4部分: 体验拖拽和通信

GWT-Ext体验之旅，第4部分: 体验拖拽和通信2011-10-29 IBM 冯 鑫,王 海成,于 敬简介：GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它非常 适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构 和功能特点，并通过代码示例来演示该技术的具体实现。本文是该系列的最后一部分，将体验拖拽的效果 ，了解常用的两种拖拽方式和一些经验总结。在对通信的介绍中，本文还将对同步通信和异步通信进行详 细介绍。

拖拽

在 GWT-EXT 中实现拖拽功能比较简单。GWT-EXT 在 com.gwtext.client.dd 包中提供了与拖拽相关的 类。图 1 展示了这些类的关系。

图 1. com.gwtext.client.dd 包中与拖拽相关的类的关系图

其中，DragDrop 是一个基类，它定义了一些可以被拖拽的元素的接口和基本操作，如 startDrag, onDrag, onDragOver 和 onDragOut 等 Drag 事件。而继承自这个类的子类，功能上主要分为两类。一个 是可以使得对象被拖动；一个是使得拖动对象可以被放置在 DropTarget 中。

首先，介绍一些能够帮助对象被拖动的类。

DD 类

用户可以通过调用 DD 的构造函数来使得对象能够被拖动。这种拖动使得对象会跟随鼠标的移动而移 动。

DD dd = new DD（Component component）;// 参数 component 是被拖动的对象

DDProxy 类

DDProxy 类继承自 DD 类。使用这个类来构造被拖动的对象时，该对象的边框会跟随鼠标的移动而移 动。而等到鼠标释放时，该对象会被重新放置到鼠标停止的位置。

DD dd = new DDProxy（Component component）;// 参数 component 是被拖动的对象

这里，举一个拖动 Panel 的例子。首先，定义一个 Panel,

Panel draggable = new Panel（）;
draggable.setTitle（"Draggable"）;
draggable.setBorder（true）;

然后，将这个 Panel 作为参数来构造一个 DD 类 ,

DD dd = new DD（draggable）;

这样，这个 Panel 就可以被拖动了。

图 2. 对象随鼠标移动的 Panel