Dreamweaver

Apply the Drag AP Element behavior

The Drag AP Element behavior lets the visitor drag an absolutely positioned (AP) element. Use this behavior to create puzzles, slider controls, and other movable interface elements.

You can specify in which direction the visitor can drag the AP element (horizontally, vertically, or in any direction), a target to which the visitor should drag the AP element, whether to snap the AP element to the target if the AP element is within a certain number of pixels of the target, what to do when the AP element hits the target, and more.

Because the Drag AP Element behavior must be called before the visitor can drag the AP element, you should attach Drag AP Element to the body object (with the onLoad event).

  1. Select Insert > Layout Objects > AP Div or click the Draw AP Div button on the Insert bar and draw an AP Div in the Document window’s Design view.
  2. Click <body> in the tag selector at the lower-left corner of the Document window.
  3. Select Drag AP Element from the Actions menu of the Behaviors panel.

    If Drag AP Element is unavailable, you probably have an AP element selected.

  4. In the AP Element pop‑up menu, select the AP element.
  5. 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.

  6. For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right boxes.

    Values are relative to the starting position of the AP element. To constrain movement within a rectangular region, enter positive values in all four 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.

  7. Enter values (in pixels) for the drop target in the Left and Top boxes.

    The drop target is the spot to which you want the visitor to drag the AP element. An AP element is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top 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 AP element.

  8. Enter a value (in pixels) in the Snap If Within box to determine how close the visitor must get to the drop target before the AP element snaps to the target.

    Larger values make it easier for the visitor to find the drop target.

  9. For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the AP element, track the movement of the AP element while it is being dragged, and trigger an action when the AP element is dropped, click the Advanced tab.
  10. To specify that the visitor must click a particular area of the AP element to drag the AP element, select Area within element from the Drag Handle 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 AP element contains 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 AP element to drag it.

  11. Select any While Dragging options that you want to use:

    • Select Bring Element To Front if the AP element 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 AP element in front or restore it to its original position in the stacking order.

    • Enter JavaScript code or a function name (for example, monitorAPelement()) in the Call JavaScript box to repeatedly execute the code or function while the AP element is being dragged. For example, you could write a function that monitors the coordinates of the AP element and displays hints such as “you’re getting warmer” or “you’re nowhere near the drop target” in a text box.

  12. Enter JavaScript code or a function name (for example, evaluateAPelementPos() ) in the second Call JavaScript box to execute the code or function when the AP element is dropped. Select Only If Snapped if the JavaScript should be executed only if the AP element has reached the drop target.
  13. Click OK and verify that the default event is correct. If not, select another event or change the target browser in the Show Events For submenu.