• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Interactive DHTML Quizzes > Programming Question 2 with the Drag Laye...

Programming Question 2 with the Drag Layer Behavior

To save time, the remaining two question pages are already built, but they have not yet been programmed. Take a moment to look over quiz2.html before you continue with this task. Since this is a drag-and-drop interaction, you won't need to create fake hyperlinks to trigger interactivity. Instead, the screen is pretty simple, with three labels and three Drop areas. The Drop image is simply an imported GIF placed in-line with text.

Off to the right are three layers, each one a different color and with a different label. These three layers—or boxes, as they will appear to users—are at the moment just like the ones you created in the last task. They float over the HTML just as other layers do. Click one of them and look at it in the Property inspector. You will notice all of its properties, including size, positioning, and background color. Again, all of these properties can be changed on the fly via JavaScript.

One of these properties I haven't mentioned is the z-index. If you recall from high school geometry, the z-axis lets you plot points in the third dimension (the x-axis lets you plot horizontally and the y-axis vertically). The z-index attribute controls the stacking order of layers, determining when two layers overlap, which one goes on top, and which one is underneath. Each layer must have a unique z-index, with 1 being the lowest. The document itself fills the space of the theoretical 0 layer, so a layer with a z-index of 1 is directly above the main document, and nothing can come between the two. If a new layer were created with a z-index of 2, it would block any areas of the layer with a z-index of 1.

The goals in this task are to have a correct drop area for the layers (boxes), to make the layers draggable, to have each layer snap to its drop area, and to have a pop-up dialog box provide feedback when the user drops the box in the right place.

Drag the layers, each in turn, to their intended destinations, so that they cover the Drop image. Press F12 and go back and forth between Dreamweaver and your browser until the layers are positioned correctly in the browser. The correct order, from top to bottom, is Leopard, Lion, and She-Wolf.

In this important step, you tell Dreamweaver where the correct or target area is; you will indicate the location in pixels, relative to the top-left corner of the document, whose coordinates are 0,0. Dreamweaver pulls the correct location from the layer's current position. So, the workflow goes as follows: First, position the layers in their target positions, then add the Drag Layer behavior (which will also generate a target based on current location); finally, move the layer somewhere else on the page. It's a bit backward, but it works.

Be warned that what looks just right in your browser may not line up in another browser. And again, there is no easy fix for this. You can and should recommend your primary browser to users, and you can also customize pages for different browsers. Here again, setting the page margins to 0 might improve matters.

In the tag selector, click <body>.

When you start working with the Drag Layer behavior, you may be surprised, as I was, to learn that the <body> tag is the starting point. With almost all other behaviors, a hyperlink, hotspot, or hot image is the starting point that contains the event handler. For example, in the previous task (“Programming Question 1 with the Show-Hide Layers Behavior”) the event handler (where it had the onClick functionName() combination) was stored in the dummy <a> tag for each of the answer options.

With the Drag Layer behavior—and don't forget this—the event handler is stored in the <body> tag itself. If that is the case, you might ask, what could the triggering event be? Having an onClick event in a hyperlink or an onMouseOver event attached to an image makes a lot of sense. But what does the user do to the <body> of an HTML document? The answer is surprisingly simple: The user loads it.

Events associated with the <body> tag go off as soon as the page is loaded. You know all those annoying ads that pop-up when you surf the Web? They are born when you load the page, because there is an event handler in the page's <body> tag that calls a JavaScript function that in turn spawns a pop-up window. The same kind of thing will happen in this interaction: The moment the page is loaded, a JavaScript function is called that will turn these hitherto dormant layers into draggable ones.

Take a look at the Behaviors panel, and notice it already has a behavior inside called Preload Images that is used for rollover effects. Without it, the browser wouldn't attempt to download the English version of the rollover image in the banner until the user rolled over the Italian version of the image rollover. This download time would delay and ruin the desired effect. The Preload Image behavior ensures that the initially hidden images are downloaded right away so when the user rolls over them, they appear instantly. Just leave this Preload Images behavior alone—the <body> tag can accommodate as many behaviors as you need.

Click the + symbol in the Behaviors panel and choose Drag Layer from the list.

By applying this behavior, you'll wire up one of the layers for drag-and-drop fun.

In the Drag Layer dialog box, Basic tab, with the Leopard layer selected, click Get Current Position.

This is the step that creates the first of the three drop targets, at the top. As soon as you click the button, the pixel coordinates of the layer appear (note that your values may be slightly different than those in the screenshot).

Also notice that the Snap If Within field now has a value of 50. This provides the “snap,” such that your user doesn't have to get within a pixel of precision to be correct.

Click to select the Advanced tab, leave the first two options at their defaults, and in the “When Dropped: Call JavaScript:” field, type alert(“Correct!”), and click OK.

The first option just makes the entire layer draggable, which is what you want. The second option refers to the z-index issue discussed at the beginning of this task. This option makes the layer being dragged the layer on top, a helpful and necessary function when you're dealing with a lot of layers.

Now, let's talk about the alert("Correct!") JavaScript. Believe it or not, you just wrote a complete script! Granted it is short, but it is enough to do what you want it to. The alert() method is built into JavaScript, meaning no further programming is necessary. This is in contrast to a function, such as MM_showHideLayers(), which is a custom-developed function built by Macromedia. The alert() method simply brings up a pop-up dialog box, with a big OK button that the user must click to make go away.

In both methods and functions, what is contained in the parentheses at the end are the parameters, the variable part of the method or function. The sole parameter of the alert() method is the text that you wish to be included in the dialog box. In this case, you are providing feedback to let the user know that she or he has dropped the layer in the correct location.

You could put a more impressive JavaScript method or function in here as well. The dropping of the layer in the target works as an event that could trigger any function or method.

Click <body> again in the tag selector, and, one at a time, set up the Drag Layer behavior for the Lion and She-Wolf layers, using the same options as above, only this time selecting the proper layer in the Basic tab.

The important thing here is to realize that each layer needs its own behavior. You can't go through and program every layer in one visit to the Drag Layer dialog box simply by filling one out and then moving onto the next. When you are finished, click <body> in the tag selector. You should have the Preload Images behavior and then, below that, three Drag Layer behaviors.

Drag the layers back to where you found them at the beginning of the task, so they are lined up in the following order, from left to right: Lion, Leopard, and She-Wolf.

Now you are just rescrambling the layers, which you can safely do, since the Drag Layer behaviors have already recorded the target drop areas.

Press F12 to test your interaction.

Whenever you're programming anything, even if you're relying on prebuilt behaviors, be sure to test it.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint