DREAMWEAVER CS3
User Guide
354
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.
Gathering information about the draggable AP element
When you attach the Drag AP element behavior to an object, Dreamweaver inserts the
MM_dragLayer()
function
into the
head
section of your document. (The function retains the old naming convention for AP elements [that is,
“Layer”] so that layers created in previous versions of Dreamweaver will remain editable.) In addition to registering
the AP element as draggable, this function defines three properties for each draggable AP element—
MM_LEFTRIGHT
,
MM_UPDOWN
, and
MM_SNAPPED
—that you can use in your own JavaScript functions to determine the relative
horizontal position of the AP element, the relative vertical position of the AP element, and whether the AP element
has reached the drop target.
Note:
The information provided here is intended for experienced JavaScript programmers only.
For example, the following function displays the value of the
MM_UPDOWN
property (the current vertical position of
the AP element) in a form field called
curPosField
. (Form fields are useful for displaying continuously updated
information because they are dynamic—that is, you can change their contents after the page has finished loading.)
function getPos(layerId){
var layerRef = document.getElementById(layerId);
var curVertPos = layerRef.MM_UPDOWN;
document.tracking.curPosField.value = curVertPos;
}
September 4, 2007
