O'Reilly logo

Dreamweaver MX: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 WindowBehaviors. 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required