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

Hour 17. Adding Advanced Behaviors: Drag... > Constraining the Movement of Your La...

Constraining the Movement of Your Layer

After you've created your drag and target layers and given them all names, you're ready to apply the Drag Layer behavior. To use the Drag Layer behavior

1.
Select the <body> tag from the tag selector in the Dreamweaver status bar.

2.
Click the + button in the Behaviors panel and select Drag Layer. The Drag Layer dialog box appears, as shown in Figure 17.2.

Figure 17.2. The Drag Layer dialog box has a basic and an advanced section.


3.
Select the name of a layer to be dragged from the Layer drop-down menu.

4.
Select Constrained from the Movement drop-down menu. Four boxes appear for you to enter the pixel value of coordinates of an area. To constrain movement to only vertical, enter values for up and down but enter 0 for right and left. To constrain movement to only horizontal, enter values for left and right but enter 0 for up and down. To define a rectangular area, enter values in all the boxes. Values are all relative to the original position of the layer. The Drag Layer dialog box should look like Figure 17.3. This layer is constrained to move 20 pixels up, 300 pixels down, 400 pixels to the left, and 20 pixels to the right from its original position.

Figure 17.3. When you select Constrained from the Movement drop-down menu, four new boxes appear. Enter pixel values to define the constrained movement area.


An easy way to figure out which values to enter in the Constrained Movement boxes is to calculate them ahead of time. You can use Dreamweaver and a little math to decide on the numbers before you start to apply the Drag Layer behavior. Write down the original L (left) and T (top) values for the layer. Move the layer to the edges of the constraining area and write down those L and T values. Figure out the difference and enter those values into the Constrained Movement boxes when you set up the Drag Layer behavior. To return your layer to its original position, enter the original L and T values into the Property inspector.


5.
Click OK to save your changes.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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