To use the Drag Layer action:
1. Select Insert > Layer or click the Draw Layer button on the Insert bar and draw a
layer in the Document window’s Design view.
2. Select the body tag by clicking in the tag selector at the bottom of the
Document window.
3. Open the Behaviors panel.
4. Click the Plus (+) button and select Drag Layer from the Actions pop-up menu.
If Drag Layer is unavailable, you probably have a layer selected. Because layers
do not accept events in both 4.0 browsers, you must select a different object--such
as the body tag or a link (a tag)--or change the target browser to Internet Explorer
4.0 in the Show Events For pop-up menu.
5. In the Layer pop-up menu, select the layer that you want to make draggable.
6. Select either Constrained or Unconstrained from the Movement pop-up menu.
Unconstrained movement is appropriate for puzzles and other drag-and-drop
games. For slider controls and moveable scenery such as file drawers, curtains,
and mini-blinds, select constrained movement.
7. For constrained movement, enter values (in pixels) in the Up, Down, Left, and
Right text boxes.
Values are relative to the starting position of the layer. To constrain movement
within a rectangular region, enter positive values in all four text boxes. To allow
only vertical movement, enter positive values for Up and Down and 0 for Left and
Right. To allow only horizontal movement, enter positive values for Left and
Right and 0 for Up and Down.
8. Enter values (in pixels) for the drop target in the Left and Top text boxes.
The drop target is the spot to which you want the visitor to drag the layer. A layer
is considered to have reached the drop target when its left and top coordinates
match the values you enter in the Left and Top text boxes. Values are relative to
the top left corner of the browser window. Click Get Current Position to
automatically fill the text boxes with the current position of the layer.
9. Enter a value (in pixels) in the Snap if Within text box to determine how close the
visitor must get to the drop target before the layer snaps to the target.
Larger values make it easier for the visitor to find the drop target.
10. For simple puzzles and scenery manipulation, you can stop here. To define
the drag handle for the layer, track the movement of the layer while it is
being dragged, and trigger an action when the layer is dropped, click the
Advanced tab.
11. To specify that the visitor must click a particular area of the layer to drag the
layer, select Area Within Layer from the Drag Handle pop-up menu; then enter
the left and top coordinates and the width and height of the drag handle.
This option is useful when the image inside the layer has an element that suggests
dragging, such as a title bar or drawer handle. Do not set this option if you want
the visitor to be able to click anywhere in the layer to drag it.
12. Select any While Dragging options that you want to use:
o Select Bring Layer to Front if the layer should move to the front of the
stacking order while it is being dragged. If you select this option, use the
pop-up menu to select whether to leave the layer in front or restore it to its
original position in the stacking order.
o Enter JavaScript code or a function name (for example, monitorLayer())
in the Call JavaScript text box to repeatedly execute the code or function
while the layer is being dragged. For example, you could write a function
that monitors the coordinates of the layer and displays hints such as
"you’re getting warmer" or "you’re nowhere near the drop target" in a text
box. For more information, see Gathering information about the draggable
layer.
13. Enter JavaScript code or a function name (for example, evaluateLayerPos()) in
the second Call JavaScript text box to execute the code or function when the layer
is dropped. Select Only if Snapped if the JavaScript should be executed only if the
layer has reached the drop target.
14. Click OK.
15. Check that the default event is the one you want.
If it isn’t, select another event from the pop-up menu. If the events you want are
not listed, change the target browser in the Show Events For pop-up menu.
Remember that layers are not supported by 3.0 browsers.
NOTE You cannot attach the Drag Layer action to an object with the onMouseDown or
onClick events.