| The Drag Layer behavior offers the capability to create high-impact interactivity with the end user. The downside is that it doesn't work well in a variety of browsers. However, if you believe that you cater to a tech-savvy group, the chances of them using a dated browser shouldn't be of much concern. The flip side is that if the people visiting your site are general users of the Internet, they probably don't care about the latest browsers and may be content using an older version of Internet Explorer or Netscape. Again, it all comes down to your target audience. Develop with them in mind, and if you think that something like the Drag Layers behavior will enhance their experience, it probably will. There is no right or wrong answer; only you can determine if it's appropriate. The Drag Layer behavior allows for the layer to be dragged in several ways. These are the types of effects you can have with the Drag Layer behavior: Drag the layer anywhere in the document. Restrict dragging to a particular direction based on the x,y coordinate you specify. Drag only a portion of the layer. Change the stacking order of the z-index. Specify a drop target and have the layer snap to that target if it is within a specified snapping pixel radius. Setting up a Drag Layer behavior is pretty painless. However, some of the options may be a bit confusing, but if you walk through this exercise step-by-step, it will make more sense. Before moving on, it's important that you have a good understanding about how layers work. Refer to Chapter 11, "Layers in Dreamweaver," to learn more about them. Creating a Draggable Layer In this exercise, you're going to create a layer that you'll be able to drag all over the document. When the layer, as it's being dragged, reaches a certain point and you release the mouse, we'll make sure that the layer snaps into place. -
Create a new basic HTML document. Choose File, Save As and save it as drag.html. -
Next, choose Insert, Layer. This will place a layer in your document. After the layer has been inserted, select it in the Properties Inspector and name it drag. -
Place a blinking cursor inside the layer and choose Insert, Image. Insert an image of your choice. -
After you place an image in the layer, draw another layer on the opposite side of the document. Select this new layer and in the Properties Inspector, name it target. -
Also, in the Properties Inspector, write down on a piece of paper the Left and Top coordinates. You'll use these values in a moment to specify the drop target. -
The final step in creating the target layer is to set its z-index to a very high value. This way it will always appear on top. In the Z-Index option in the Properties Inspector, enter in a value of 1000. -
You're now ready to attach the Drag Layer behavior to the first layer, drag. With the drag layer selected, open the Behaviors panel and click the Add Behavior (+) button. Choose the Drag Layer behavior. This will open the Drag Layer dialog box, as shown in Figure 19.12. Figure 19.12. The Drag Layer dialog box offers a Basic tab and an Advanced tab.
-
In the first drop-down menu, choose the drag layer, because this is the layer you want the end user to be able to drag. -
For Movement, choose Unconstrained. This will allow the end user to freely drag the layer all over the document. If you choose Constrained, you must specify the coordinates in which you want the layer to be constrained. -
For the Drop Target option, enter in the Left and Top coordinates you took from the target layer. -
There is also an option for Snap Within. The value you enter here represents pixels. The default is set to 50, which means if the layer that is being dragged is released within 50 pixels of the target layer, it will snap to the top and left coordinates you specified in step 9. If you leave this option empty, the snap feature will be disabled. -
Click the Advanced tab. For the Drag Handle option, choose entire layer, which means the end user can drag this layer from any point. -
Check the option to bring the layer to the front while dragging. However, after the end user releases the layer, you want it to appear behind the target layer. Earlier you specified a z-index of 1000 for the target layer, and the drag layer has a z-index of 1. In the drop-down menu, choose Restore Z-Index. This places the drag layer back to its original value of 1, which is less than 1000, so when the end user releases the mouse it will appear as if the layer went inside the target layer. -
Choose OK. When you return to the document, preview it in a browser. Notice that you can drag the layer all over the document, and if you release it close enough to the target layer, it automatically snaps into place and disappears behind the target layer. |
Practical applications for the Drag Layer behavior include things such as games, learning interactions, and interactivity with the end user. |
