One of the most powerful uses of Dynamic HTML is the creation of draggable layers. Find below an example of an exercise creating using Draggable layers. Try dragging the name of the state capital to it's respective state. Cool! Let's see how to do this. First, you'll need to download "map.gif."
Step One: Begin the usual way with dreamweaver by designating a root folder, moving the graphics "map.gif" into that folder, then creating and saving a new page.
Step Two: Start by selecting insert graphic from under the Insert
menu, 
Then, locate the copy of "map.gif" and select it to be placed in your web page.
Step Three: Now, you'll notice that the graphic is still selected. Here's a tip. Press the LEFT arrow on your computer keyboard to put the cursor BEFORE the graphic. This way, when you insert the layer, the code to create it will be at the beginning of your page.
Step Four: Select Insert Layer under the Insert menu. 
An icon will appear along with the layer.
Step Five: To select the layer and manipulate it, place your cursor
over the little box at the top left hand corner. In a Macintosh, it will look
like this: 
In windows like this:
Click on it.
Step Six: The layer will show eight bounding boxes now:
Also, open the selection properties menu under the Modify menu (if it isn't already open) and notice how it looks.
First thing we should do is give our layer a name. Type in "jeffcity" into the Layer ID box like above. NOTE: It is IMPORTANT
that you remember that this should always be either ONE name only or a series of words with NO spaces!
Step Seven: Go ahead and place your cursor inside the layer. Notice how the properties window changes?
Type Jefferson City, make it Heading 3, and type a # in the Link box
Step Eight: Now, select the layer again, and crop it to the size of the text. Do this by grabbing the bounding box in the lower right hand corner and moving it
Step Nine: Now, click on the selection box at the upper left hand corner of the layer, and drag the layer to where you which it to be positioned, right over the state of Missouri.
Step Ten: OK, now we're ready to enable the layer. Click on the TEXT inside the layer (Jefferson City), then open the Behaviors menu under the Window menu
Step Eleven: Make sure that the behaviors menu shows <a> Actions
at the top. If not, make sure you have placed your cursor inside the text 
Step Twelve: Click on the + sign in the Behaviors Menu, and pull down to Draggable Layers
Step Thirteen: This menu will pop open:
Notice how the layer "jeffcity" is selected. If you had other layers, they would be accessible through this pull-down menu.
Click on "Get Current Position."
This will set up the draggable layer so that when it is dropped on that position, it will run a Javascript.
Change Snap if Within to 10 pixels
Step Fourteen: Now, click on the Advanced tab at the top of the menu
In this screen, we only need to add the JavaScript which will run when the layer is placed on Missouri.
In When Dropped: Call JavaScript, type:
alert('Jefferson City is the capital of Missouri');
Then, click OK.
Step Fifteen: Now, you need to change the Event associated with this action. In the behaviors window, click on the small triangle next to "onClick" and select "onMouseover" This will mean that when the user passes their mouse over the text, it will automatically become draggable.
Step Sixteen: The last thing you need to do is drag the layer to where it will start when the window is loaded. Drag it to the lower left hand corner like the demo above.
Step Seventeen: Preview the page in a your browser and viola! NOTE: You MUST view this in a 4.0 or newer browser. A 3.0 browser will NOT show you this properly.
Now, try to make some more layers for the other states' capitals.
