Implement Drag and Drop in Your Web Apps

By David Geary and Rob Gordon

The ultimate in user interactivity, drag and drop is taken for granted in desktop applications but is a litmus test of sorts for web applications: If you can easily implement drag and drop with your web application framework, then you know you've got something special.

Until now, drag and drop for web applications has, for the most part, been limited to specialized JavaScript frameworks such as Script.aculo.us and Rico. No more. With the advent of GWT, we have drag-and-drop capabilities in a Java-based web application framework. Although Google Web Toolkit (GWT) does not explicitly support drag and drop (drag and drop is an anticipated feature in the future), it provides us with all the necessary ingredients to make our own drag-and-drop module.

In this solution, we explore drag-and-drop implementation with GWT. We implement drag and drop in a module of its own so that you can easily incorporate drag and drop into your applications.

Stuff You're Going to Learn

This solution explores the following aspects of GWT:

Implementing composite widgets with the Composite class
Removing widgets from panels
Changing cursors for widgets with CSS styles
Implementing a GWT module
Adding multiple listeners to a widget
Using the AbsolutePanel class to place widgets by pixel location
Capturing and releasing events for a specific widget
Using an event preview to inhibit browser reactions to events

See Solution 1 and Solution 2 for more in-depth discussions of implementing GWT modules and implementing composite widgets, respectively.

The Drag-and-Drop Example Application

Our discussion of drag and drop (dnd) starts with a sample application that uses our drag-and-drop module. Then we peel back the layers of the drag-and-drop onion to reveal the underlying implementation.

Figure 6.1 shows the drag-and-drop example application in action. The application contains iPods and Zunes that can be dragged into their respective shopping carts. When you start dragging a music player, the cursor changes to the pointer cursor to indicate that a drag is underway, just in case the actual movement of the music player is not enough evidence of that fact.

If a user drags a music player, which in dnd parlance is known as a drag source, over its shopping cart (referred to as a drop target), two things happen: We once again change the cursor, this time to a move cursor, to indicate that a drop is acceptable for this drop target (known as a drag-over effect), and we change the border of the drop target (known as a drag-under effect). If the user subsequently releases the mouse while the drag source is over the drop target, we remove the drag source from the page and update the drop target to reflect the fact that it now contains the music player that was dropped.

If the user starts dragging a music player and then decides against dropping it on its shopping cart panel, we scoot the music player back to its original position, as illustrated in Figure 6.2. This is standard drag-and-drop behavior.

Finally, notice that we have two drop targets: one for iPods and another for Zunes. Users cannot drag an iPod into the Zune shopping cart, or vice versa. If they try to do so, the cursor changes to the no-drop cursor when the music player enters the forbidden shopping cart, as shown in Figure 6.3. When a user drops a music player over a forbidden shopping cart, the music player moves back to its original position, just as it does when dropped outside any drop target.

Our drag-and-drop application uses a drag-and-drop module. We discuss that module in detail in "Drag and Drop Implementation in a GWT Module", but for now let's see what's involved in using that module.

The Drag-and-Drop Module

The drag-and-drop application and its associated files and directories are shown in Figure 6.4.

The application is made up primarily of five things: Java source files; images; a CSS file; a configuration file; and an HTML page. In Solution 1, we showed you how to use custom widgets that were packaged in a module. For the drag-and-drop application, we employ the same technique—a two-step process—to use the drag-and-drop module:

Inherit the module with an inherits element in the configuration file.
Include the module's JAR file in our application's classpath.

We showed you how to include GWT Solutions Components module in your application's classpath in "Custom Widget Use" (page 40), so we don't cover that ground again, but we do show you how we inherit the drag-and-drop module in the application's configuration file.

URL:

Implement Drag and Drop in Your Web Apps