Gathering information about the draggable layer

When you attach the Drag Layer action to an object, Dreamweaver inserts the MM_dragLayer() function into the head section of your document. In addition to registering the layer as draggable, this function defines three properties for each draggable layer--MM_LEFTRIGHT, MM_UPDOWN, and MM_SNAPPED--that you can use in your own JavaScript functions to determine the relative horizontal position of the layer, the relative vertical position of the layer, and whether the layer has reached the drop target.

For example, the following function displays the value of the MM_UPDOWN property (the current vertical position of the layer) 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--in both Netscape Navigator and Internet Explorer.)

function getPos(layername){
   var layerRef = MM_findObj(layername); 
   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 a layer depending on the value.

It is especially useful to read the MM_SNAPPED property when you have several layers 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 layers have an MM_SNAPPED value of true and call it whenever a layer 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.

If you have used the onMouseOver event to attach the Drag Layer action to links within several layers, you must make a minor change to the MM_dragLayer() function to prevent the MM_SNAPPED property of a snapped layer from being reset to false if the mouse pointer rolls over the layer. (This can happen if you have used Drag Layer to create a picture puzzle, because the visitor is likely to roll the mouse pointer over snapped pieces while positioning others.) The MM_dragLayer() function does not prevent this behavior, because it is sometimes desirable--for example, if you want to set multiple drop targets for a single layer.

To prevent re-registration of snapped layers:

1. Make a backup copy of your document before making any changes to the code. (You can do this in the Site panel in Dreamweaver, or in Windows Explorer (Windows) or the Finder (Macintosh).)
2. Select Edit > Find.
3. Select HTML Source from the Find What pop-up menu.
4. Type (!curDrag), including the parentheses, in the adjacent text box.
5. Click Find Next.

   If Dreamweaver asks if you want to continue searching from the beginning of the document, click Yes. Dreamweaver finds a statement that reads:

   if (!curDrag) return false;
   

6. Close the Find dialog box and then modify the statement in the Document window’s Code view or in the Code inspector so that it reads:

   if (!curDrag || curDrag.MM_SNAPPED != null) return false;
   

   The two pipes (||) mean OR, and curDrag is a variable that represents the layer that is being registered as draggable. In English the statement means "If curDrag is not an object, or if it already has an MM_SNAPPED value, don’t bother executing the rest of the function."