The Desktop Metaphor
Element selection and repositioning are the building blocks upon which every desktop manager relies. You can now combine the two and recreate the same experience within your web pages, enabling your users to select items and reposition them the same way they do with the icons on their desktops. Listing 4
shows how to modify the drag()
handler to keep track of selected items, so that they all move together.
Panning and the Endless Desktop
So far, you have reproduced only features that are commonplace elsewhere. Let's spice things up a bit and provide some extra behaviors. When you have many items to display, they may not fit in a single page. Instead of just increasing the page size and providing scrollbars, which is cumbersome if you need spatial navigation, a better alternative is to provide the user a way to pan around in a sort of endless desktop. If you have ever used Google Maps
, you are already familiar with the concept: You can use the mouse to drag the map around and change the portion which is visible in the browser window.
To reproduce the same effect, you must change the structure of the web page, as you need three layers to achieve the result:
- The universe layer: where all the items and object are anchored
- The viewport layer: the one the user directly sees and clips all the contents that fall outside of its bounds. It sits on top of the universe layer.
- The scroll layer: a transparent layer whose only purpose is to trap mouse drag events and propagate relative movements down to the universe layer. A button will trigger the activation of this layer, so that the viewport remains accessible.
Figure 4 shows a conceptual diagram of the endless desktop setup.
|Figure 4. Layers Required to Recreate the Endless Desktop Effect: Here is a conceptual diagram of the endless desktop setup.|
You can implement this layout using three different DIVs and carefully choosing their CSS attributes. The most important one is overflow:hidden, which transforms the viewport DIV into a clipping region. Listing 5 shows the details.
The remaining bit is to write the code that propagates drag movements from the scroll layer to the underlying universe layer (see Listing 6).
Figure 5 shows the final result.
|Figure 5. Panning Around in a Limited Viewport: Here is the result of propagating drag movements from the scroll layer to the universe layer.|
The last feature that you are going to implement is zooming. The idea is relatively simple: detect the mouse wheel moving up and down and use such information to rescale items within the user interface accordingly. The mousewheel plugin
enriches jQuery with an additional callback, mousewheel()
, which is invoked whenever the mouse wheel is operated. The callback includes the amount of wheel movement in its delta
When the callback triggers, the code you are about to implement zooms DOM elements in or out by rescaling their relevant dimensional CSS attributes. These include font sizes, paddings, margins, widths, and heights. A more complex behavior may be required when scaling raster images; it may be necessary to store the same image at different resolution levels to prevent pixelization.
In this example, DOM elements use absolute positioning, therefore rescaling their positional attributes (CSS top and left attributes) requires special attention. Rescaling must be relative to the current mouse position so that the zoom will be centered where the mouse is currently pointed. See Listing 7 for the entire logic to handle zoom, minus image rescaling.