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

Lesson 15. Creating Layers > Using the Drag Layer Behavior

Using the Drag Layer Behavior

Layers can be combined with behaviors 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.

Place the insertion point at the end of the text 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. Click the Image icon on the Common tab of the Insert bar and insert the rocks-ocean.jpg image.

The rocks-ocean.jpg image that you used previously in Layer3 is now in the textlayer, just below the table containing the text.

Select the lighthouse layer. Type the following values: set the width of the lighthouse layer to 70px, the height to 131px, the left value to 50px, and the top value to 140px. Create a layer just above the lighthouse layer. Name it grab and type Grab the lighthouse image below and move it to a location on the landscape to the right. Format the text as Verdana, –2. Click the center alignment button on the Property inspector.

You adjusted the dimensions of the lighthouse layer to make it exactly the same size as the image it contains. The new grab layer should not overlap any other layers.

Your document should now look similar to the example shown here.

It is a good practice to be sure to let your visitors know whether an item can be moved. Now that you've included text to let the visitor know the lighthouse image is draggable, you can apply the behavior.

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.


You can also apply the Drag Layer Behavior to other tags, like link <a href> that can be either inside or outside of a layer.

In the Behaviors panel, click the plus sign (+) button and select the Drag Layer action from the Actions drop-down menu.

The Drag Layer dialog box appears with the Basic tab active.


The Drag Layer action will not be available if you have a layer selected. If it is grayed out, you should make sure the <body> tag is selected.

Select layer lighthouse from the Layer drop-down menu. Choose Constrained from the Movement drop-down menu.

Four text fields will appear to the right of the Movement drop-down menu: Up, Down, Left, and Right.

Type 70 in the Up text field, 22 in the Down text field, 0 in the Left text field, and 390 in the Right Text field. Leave the text fields for Drop Target and Snap if Within blank.

The coordinates will allow the visitor to place the lighthouse only within the area of the landscape image. The amount of allowable movement will be relative to the original position of the lighthouse layer. You are restricting the visitor to moving the lighthouse only 70 pixels upward of where it is now, only 22 pixels downward, and so forth.


If you had chosen Unconstrained from the Movement menu, the visitor would be able to move the lighthouse image anywhere on the page.

You can use the Constrain option to control the direction and amount of pixels in which the visitor is able to drag a layer. You could 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 image could not be moved up or down. Likewise, you could restrict movement to a vertical direction by the Left and Right text fields to 0.


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.

Click OK. Save the file and preview it in the browser.

Test out the movement of your lighthouse image 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.



Not a subscriber?

Start A Free Trial

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