Advanced Web Application Topics

Figure 11.6. Application State Management with URI Fragment Utility

11.11. Drag and Drop

Dragging an object from one location to another by grabbing it with mouse, holding the mouse button pressed, and then releasing the button to "drop" it to the other location is a common way to move, copy, or associate objects. For example, most operating systems allow dragging and dropping files between folders or dragging a document on a program to open it. In Vaadin, it is possible to drag and drop components and parts of certain components.

Dragged objects, or transferables, are essentially data objects. You can drag and drop rows in Table and nodes in Tree components, either within or between the components. You can also drag entire components by wrapping them inside DragAndDropWrapper.

Dragging starts from a drag source, which defines the transferable. Transferables implement the Transferable interfaces. For trees and tables, which are bound to Container data sources, a node or row transferable is a reference to an Item in the Vaadin Data Model. Dragged components are referenced with a WrapperTransferable. Starting dragging does not require any clientserver communication, you only need to enable dragging. All drag and drop logic occurs in two operations: determining (accepting) where dropping is allowed and actually dropping. Drops can be done on a drop target, which implements the DropTarget interface. Three components implement the interface: Tree, Table, and DragAndDropWrapper. These accept and drop operations need to be provided in a drop handler. Essentially all you need to do to enable drag and drop is to enable dragging in the drag source and implement the getAcceptCriterion() and drop() methods in the DropHandler interface.

The client-server architecture of Vaadin causes special requirements for the drag and drop functionality. The logic for determining where a dragged object can be dropped, that is, accepting a drop, should normally be done on the client-side, in the browser. Server communications are too slow to have much of such logic on the server-side.The drag and drop feature therefore offers a number of ways to avoid the server communications to ensure a good user experience.

11.11.1. Handling Drops

Most of the user-defined drag and drop logic occurs in a drop handler, which is provided by implementing the drop() method in the DropHandler interface. A closely related definition is the drop accept criterion, which is defined in the getAcceptCriterion() method in the same interface. It is described in Section 11.11.4, “Accepting Drops” later.

The drop() method gets a DragAndDropEvent as its parameters. The event object provides references to two important object: Transferable and TargetDetails.

304	Drag and Drop