Adobe Dreamweaver CC 2015 - Manual (Page 425)

418
Javascript
Last updated 6/3/2015
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.
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;
}
Instead of displaying the values of MM_UPDOWN or MM_LEFTRIGHT in a form field, you could use those values
in a variety of other ways. For example, you could write a function that displays a message in the form field depending
on how close the value is to the drop zone, or you could call another function to show or hide an AP element depending
on the value.
It is especially useful to read the MM_SNAPPED property when you have several AP elements on the page, all of which
must reach their targets before the visitor can advance to the next page or task. For example, you could write a function
to count how many AP elements have an MM_SNAPPED value of true and call it whenever an AP element is dropped.
When the snapped count reaches the desired number, you could send the visitor to the next page or display a message
of congratulations.