Creating Draggable Layers
For a truly interactive Web experience, you can create draggable layers that let your visitors rearrange Web page elements themselves. Imagine taking last year’s Christmas photo and turning it into a Web-based picture puzzle, which your kids and friends can try to piece together. You could even create a magnetic poetry page, where visitors can drag words around the screen to create their own stream-of-consciousness rants.
Dreamweaver’s Drag Layer behavior lets you free a layer from its normally sedentary existence. You can control how the layer is dragged, make it snap into a predefined position, and even have it trigger other exciting JavaScript commands.
Once again, you’ll have to slog through Chapter 11 to learn something about Behaviors before proceeding. Once you’ve grasped the concepts of events, actions, and attached HTML tags, you’re ready to begin.
Start by adding a layer to a Web page, using the techniques described on page 371. You may want to give it a name that fits—puzzle1, for instance.
You must now attach a behavior to an HTML tag (see page 331). Very often, you’ll add this behavior to the <body> of the page, so that the Drag Layer behavior makes the layer draggable right when the page loads.
If the Behaviors panel isn’t on the screen, choose Window→Behaviors. From the + menu on the panel, choose Drag Layer to make the Drag Layer dialog box appear (see Figure 12-10). Fill it out like this:
Layer. Select the layer you want to manipulate. You ...
Get Dreamweaver MX: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
