15.1. Drag-And-DropDrag, Move, Pull, Rearrange Figure 15-1. Drag-And-Drop15.1.1. Goal StoryStuart is purchasing books online. Each time he wants to buy one, he drags the book icon into a shopping cart. 15.1.2. ProblemHow can users rearrange objects on the page? 15.1.3. Forces
15.1.4. SolutionProvide 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:
There are a few ways to implement Drag-And-Drop:
Here are a few Drag-And-Drop libraries, all of which have good cross-browser support and online demos:
The basic approach used for Drag-And-Drop is as follows:
15.1.5. Decisions15.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 Examples15.1.6.1. Magnetic PoetryMagnetic Poetry (http://www.broken-notebook.com/magnetic) is a fun application that simulates dragging magnetic tiles around a fridge. 15.1.6.2. Backbase PortalBackbase 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 MapsA9 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 PoetryMagnetic 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:[*]
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. Alternatives15.1.8.1. Separate Editing InterfaceThe 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 Patterns15.1.9.1. SpriteDrag-And-Drop is often the mechanism used to move Sprites (see the next pattern) around. 15.1.9.2. PortletA portal can be personalized by letting the user drag Portlets (see later) around. 15.1.9.3. SliderA Slider (Chapter 14) is a special case of Drag-And-Drop, where the value indicator is dragged along the slider axis. |