Basic Steps

These links guide your through the various steps that compose a compelling spatial desktop:

• Basic template: the basic template you'll work on. This is just a skeleton for your experiments. Nothing is implemented here.
• Single draggable: how to make single elements moveable so that you can reposition them on the screen.
• Group draggable: as above, with elements grouping, so many of them move around together.
• Selection: how to make elements selectable.
• Selection and Dragging: the composition of the previous two functionalities, item moving and selection. You can select multiple items and move them together.
• Panning: create viewports that show only a partial view of the space and allow panning around.
• Zooming: make your items zoom-aware and allow zooming in and out using the mousewheel.
• All of the above: a complete example that composes all the previous example together in a coherent whole: move, drag, zoom, pan and select.

An interesting example

Play with Magic Cards! Put all the previous examples together, along with a bit of CSS animation into a fictional card organizer for Magic The Gathering(tm).

Compatibility

All the above examples have been tested on Firefox and Safari (on a mac, although the platform shouldn't affect the results).