| Layers can be combined with behaviors, which were covered in Lesson 8, to enable your visitors to interact with your page. The Drag Layer behavior makes it possible for the visitor to grab a layer in the browser window and move it to a different spot on the page. This is a great way to create interactive games or teaching tools with elements that can be moved by the user. 1. | Place the insertion point in the text that is in the textlayer layer. Click the <table> tag in the tag selector at the bottom of the Document window. Press the right arrow key once to move the insertion point after the table and insert the teaching.jpg imagetype teaching as the alternative text for the image.
The teaching.jpg image that you used previously in Layer3 is now in the textlayer, just below the table containing the text.
| | | 2. | Create a new layer just below the class layer. Name it grab and type the following inside the layer: "Grab the class image above and move it next to the photograph of the teacher below."
Your document should now look similar to the example shown here.
 It is a good practice to let your visitors know when an item can be moved. Now that you've included text to let the visitor know the class image is draggable, you can apply the behavior.
| 3. | Click the <body> tag in the tag selector at the bottom of the Document window to select it.
The Drag Layer behavior cannot be applied directly to a layer, so you will apply it to the document's <body> tag.
Tip You can also apply the Drag Layer Behavior to other tags, such as link <a>, which can be either inside or outside of a layer. | 4. | In the Behaviors panel, click the plus sign (+) button and select the Drag Layer action from the Actions drop-down menu.
Tip The Behaviors panel is located in the Tag inspector panel group. (Behaviors were covered in Lesson 8.)  The Drag Layer dialog box appears with the Basic tab active.
Note The Drag Layer action is not available if you have a layer selected. If it is dimmed, you should make sure that the <body> tag is selected. | 5. | Select layer "class" from the Layer menu and choose Constrained from the Movement menu.
Four text fields appear to the right of the Movement pop-up menu: Up, Down, Left, and Right.
| | | 6. | Type 10 in the Up text field, 600 in the Down text field, 10 in the Left text field, and 10 in the Right Text field. Leave the text fields for Drop Target and Snap If Within blank.
The coordinates allow the visitor to place the class layer only within the area of the teaching image. The amount of allowable movement is relative to the original position of the class layer. You are restricting the visitor to moving the class layer only 10 pixels upward of where it is now, only 600 pixels downward, and so forth.
 Tip If you choose Unconstrained from the Movement menu, the visitor can move the class layer anywhere on the page. You can use the Constrain option to control the direction and amount of pixels in which the visitor can drag a layer. You can restrict the visitor to moving the layer only in a horizontal direction by setting the Up and Down text fields to 0 so that the layer could not be moved up or down. Likewise, you can restrict movement to a vertical direction by setting the Left and Right text fields to 0.
Note If you have a target area where you want the visitor to place the layer, you can specify that location by typing into the Drop Target text fields the left and top values that the layer should have in its target position. You can make it easier for a visitor to place the layer in the target location by causing the layer to snap to the target location if the layer is moved within the range of pixels that you specify; use the Snap If Within text field to set the snap-to range. | 7. | Click OK. Save the file and preview it in the browser.
|
Test the movement of your class layer by trying to move it. Notice that you can move it only within the region specified by the numeric values you entered in Step 6. This behavior might not work in all browsers. Note The Advanced tab in the Drag Layer dialog box allows you to specify an area of the image as a handle that the visitor can use to grab and move the layer. It also gives you control over what happens to the z-index of the layers when the layer is moved. You also have the option to call additional JavaScripts while the layer is moving, when the layer is dropped, or when the layer snaps to the target. The Drag Layer behavior gives you the ability to create a more interactive experience for the visitor.
|
