Ajax Design Patterns

15.1. Drag-And-Drop

Drag, Move, Pull, Rearrange

15.1.1. Goal Story

Stuart is purchasing books online. Each time he wants to buy one, he drags the book icon into a shopping cart.

15.1.2. Problem

How can users rearrange objects on the page?

15.1.3. Forces

• Object relationships are important and the user's task often involves changing those relationships.

• Ajax Apps often represent object relationships visually.

• Rearranging the visual structure from a separate form is messyi.e., trying to map between the form and the visual structure is confusing and error-prone. It's easiest if users can directly manipulate the visual structure.

15.1.4. Solution

Provide a Drag-And-Drop mechanism to let users directly rearrange elements on the page. Drag-And-Drop has proven itself to be a powerful control mechanism in conventional desktop applications; it is certainly achievable using standard web technologies. The basics are straightforward: the user holds down the mouse button while the mouse hovers over a page element, then moves the mouse with the button still depressed. The element follows the mouse around until the user finally releases it.

Constraints are sometimes applied to the extent of movement. For example, an element may only be able to move in one direction, or within a bounding box. Also, the element might move permanently when the mouse is released, or flip back to its original position. Another variable is exactly which part of the element must be dragged. Sometimes it's better to define a "handle" regiona specified place where the element can be "picked up" for dragging. The main benefit to this is that it allows the user to click elsewhere in this region.

The following are among the applications:

Rearranging lists

This simple task can be ridiculously tedious on the Web. Some web sites require an entire page reload each time you move an object up or down. Others have implemented the buttons in JavaScript, but you still have to click Up or Down repeatedly just to place a single item. Drag-And-Drop is a natural fitjust pick up the list items and drop them where you want them.

Rearranging items in a geometric space

This is also a natural application: pick up the objects and drag them where you want them to go.

Operating on a geometric space

This might include dragging a magnifying glass or an eraser through an image.

Building up a collection

One example of collections building is dragging products into a shopping cart.

Expressing an action

Perhaps the most famous use of Drag-And-Drop was Apple's original deletion mechanism, where you delete something by dragging it into the trash can. The basic idea is to represent a command visually as an icon and let the user drag items into it for processing.

There are a few ways to implement Drag-And-Drop:

• Reuse an existing library. Libraries are becoming increasingly powerful and portable, and it's likely that those available will do the job for you.

• Leverage built-in Drag-And-Drop. Unfortunately, this isn't much of an option because only Windows IE supports Drag-And-Drop explicitly.

• Roll your own Drag-And-Drop. This is not recommended due to portability issues.

Here are a few Drag-And-Drop libraries, all of which have good cross-browser support and online demos:

Scriptaculous(http://script.aculo.us)

Provides, among other things, a general-purpose, portable Drag-And-Drop library

wzDragDrop (http://www.walterzorn.com/dragdrop/dragdrop_e.htm)

A Drag-And-Drop library that also includes resize capability

DOM-Dra (http://www.youngpup.net/2001/domdrag/tutorial)

A lightweight Drag-And-Drop library

Tim Taylor's Drag-And-Drop Sortable Lists (http://tool-man.org/examples/sorting.html)

A library designed specifically for list manipulation, supporting Drag-And-Drop-based reordering

The basic approach used for Drag-And-Drop is as follows:

1. Event handlers inspect the incoming event to determine which element is being dragged.

2. An onmousedown handler saves the starting coordinates, sets the zIndex so that the element appears in front during the drag, and changes some other style settings to indicate a drag has begun.

3. A mousemove handler inspects the mouse's coordinates and moves the element accordingly using positioning style properties (usually left and top). Here's where cross-browser support gets nastymouse coordinates in the event object are seriously platform-specific.

4. An onmouseup handler restores normal style settings and performs any other cleaning up.

15.1.5. Decisions

15.1.5.1. What constraints will apply to the drag operation?

You will need to decide directions in which the element can move and how far it can move. Generally, this should be fairly obvious from the visual representation being manipulated; often, there is a container in which similar objects live. This should be the bounding box for dragging operations.

15.1.6. Real-World Examples

15.1.6.1. Magnetic Poetry

Magnetic Poetry (http://www.broken-notebook.com/magnetic) is a fun application that simulates dragging magnetic tiles around a fridge.

15.1.6.2. Backbase Portal

Backbase Portal (http://projects.backbase.com/RUI/portal.html) shows various Portlets in a three-column structure. Users can easily rearrange the Portlets to suit their own taste using a Drag-And-Drop mechanism. Google's portal (http://www.google.com/ig) and Microsoft's Start.com (http://www.start.com/3/) follow a similar approach.

15.1.6.3. A9 Maps

A9 Maps (http://maps.a9.com) offers photographs of map locations. A draggable magnifying glass appears on the map, and you can move it to different regions of the map to see what the area looks like in real life.

15.1.7. Code Example: Magnetic Poetry

Magnetic Poetry uses the DOM-Drag library (http://www.youngpup.net/2001/domdrag/tutorial) to support dragging. On initialization, each tile is passed successively to Drag.init. The tiles may only be dragged within the board region, so the container's dimensions are passed in during the initialization sequence:

for(i=1; i<=numWords; i++){ var currentTile = document.getElementById("word_" + i); var x1 = parseInt(document.getElementById("board").style.left); var x2 = parseInt(document.getElementById("board").style.width) - parseInt(currentTile.style.width) - 6; var y1 = parseInt(document.getElementById("board").style.top); var y2 = parseInt(document.getElementById("board").style.height) - parseInt(currentTile.style.height) - 6; the last 4 args restrict the area that the tile can be dragged in Drag.init(currentTile, null, x1, x2, y1, y2); }

The initialization is all you need to support dragging. With the preceding code, the tiles can now be happily moved around the board space. However, the application does a little more than that: it tracks the currently dragged tile, and it saves the position once dragging is finished using an XMLHttpRequest Call. To that end, onDragStart and onDragEnd handlers are registered on each of the tiles:^[*]

^[*] The JavaScript is outputted from a PHP script.

echo 'document.getElementById("word_' . $i . '").onDragStart = function(x, y) { dragStart("word_' . $i . '", x, y); };'; echo 'document.getElementById("word_' . $i . '").onDragEnd = function(x, y) { dragEnd("word_' . $i . '", x, y); };';

15.1.8. Alternatives

15.1.8.1. Separate Editing Interface

The conventional solution has been to provide a visual representation in one region and controls in another. This is often cumbersome and error-prone.

15.1.9. Related Patterns

15.1.9.1. Sprite

Drag-And-Drop is often the mechanism used to move Sprites (see the next pattern) around.

15.1.9.2. Portlet

A portal can be personalized by letting the user drag Portlets (see later) around.

15.1.9.3. Slider

A Slider (Chapter 14) is a special case of Drag-And-Drop, where the value indicator is dragged along the slider axis.