Implement Drag and Drop in Your Web Apps - Part 2

Implement Drag and Drop in Your Web Apps: Part 2

David Geary and Rob Gordon

Drag and Drop Implementation in a GWT Module

Now that we have a good grasp of how to use the dnd module, let's look at how it's implemented.

The drag-and-drop module is implemented inside, our Components module. See Figure 6.5 shows the drag and drop's pertinent files and directories.

Like all GWT modules, our drag-and-drop module has an XML configuration file. Like most modules, our drag-and-drop module also has some Java classes and interfaces.

The Module Configuration File

Every GWT module must provide a configuration file. The dnd module's configuration file is listed in Listing 6.10.

Listing 6.10 com/gwtsolutions/dnd/Dnd.gwt.xml

It doesn't get any simpler than that. All we need for our dnd module is the core GWT classes, so that's what we inherit.

Now let's look at the Java classes in the dnd module.

The Abstract Drag Source and Drop Target Classes

The DragSource class is listed in Listing 6.11.

Listing 6.11 com.gwtsolutions.components.client.ui.dnd.DragSource

package com.gwtsolutions.components.client.ui.dnd;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Widget;
import com.gwtsolutions.components.client.ui.MousePanel;
import com.gwtsolutions.components.client.ui.Point;
public abstract class DragSource extends MousePanel {
 private static final String BAD_PARENT =
 "Drag sources must have a parent of type AbsolutePanel";
 private static final MouseListener defaultDragger =
 new FollowsMouseDragger();
 private boolean dragging = false;
 private Point originalLocation = null;
 private DropTarget enclosingDropTarget = null;
 public DragSource(Widget w) {
 // Drag sources contain only one widget, which is
 // the widget passed to this constructor
 add(w);
 // Listener order is significant. See the text
 // of GWT Solutions for more information
 addMouseListener(new DragSourceListener());
 addMouseListener(getMouseListener());
 }
 public void onLoad() {
 // GWT calls this method when the drag source's
 // DOM element is added to the browser's DOM tree.
 if ( ! (getParent() instanceof AbsolutePanel))
 throw new IllegalStateException(BAD_PARENT);
 }
 public void dragStarted() {
 // subclasses can override this no-op method
 // as needed
 }
 public void droppedOutsideDropTarget() {
 // By default, when a drag source is dropped outside
 // of any drop target, it is returned to its original
 // position. Subclasses can override this method to
 // change or augment that behavior
 returnToOriginalPosition();
 }
 public void acceptedByDropTarget(DropTarget dt) {
 // subclasses can override this no-op method
 // as needed
 }
 public void rejectedByDropTarget(DropTarget dt) {
 // By default, when a drag source is rejected by
 // a drop target, it is returned to its original
 // position. Subclasses can override this method to
 // change or augment that behavior
 returnToOriginalPosition();
 }
 public boolean isDragging() {
 return dragging;
 }
 public void setDragging(boolean dragging) {
 this.dragging = dragging;
 }
 public void setOriginalLocation(Point originalLocation) {
 this.originalLocation = originalLocation;
 }
 public DropTarget getEnclosingDropTarget() {
 return enclosingDropTarget;
 }
 public void setEnclosingDropTarget(
 DropTarget enclosingDropTarget) {
 this.enclosingDropTarget = enclosingDropTarget;
 }
 protected void returnToOriginalPosition() {
 AbsolutePanel ap = (AbsolutePanel) getParent();
 ap.setWidgetPosition(this, originalLocation.x,
 originalLocation.y);
 }
 protected MouseListener getMouseListener() {
 return defaultDragger;
 }
}

This simple extension of the MousePanel we discussed in "The Viewport's Use of a Focus Panel: Revisited" (page 115) defines three properties and implements four methods that subclasses are likely to use: dragStarted(), droppedOutsideDropTarget(), acceptedByDropTarget(), and rejectedByDropTarget().

The properties keep track of whether the mouse panel is currently being dragged, its position before the drag began, and the enclosing drop target, if any. The methods are typically overridden by subclasses, as is the case for the MusicPlayerPanelDropTarget, listed in Listing 6.6 on page 178.

[next]

URL:

Implement Drag and Drop in Your Web Apps - Part 2