· Drag layers
Drag layer actions allow visitors to drag layers. Use this action to create puzzle games, slider controls, and other removable interface elements.
You can specify in which direction the visitor can drag layers (horizontal, either vertically or in any direction, the target that the visitor should drag the layer to, if the layer aligns the layer to the target in a certain number of pixels, and the actions and other options that should be performed when the layer touches the target.
Because the drag layer action must be invoked before the visitor can drag the layer, make sure that the event that triggers the action occurs before the visitor attempts to drag the layer. The best approach is to attach the drag layer to the Body object (using the OnLoad event), but you can also use the OnMouseOver event to attach it to a link that fills the entire layer.
The process of the specific production is as follows:
Select Insert-->> Layout object-->> layer to insert a layer in the document window. The layer is: Layer1. We can insert a picture in the layer.
Select the Body label by clicking <body> in the label selector at the bottom of the document window.
Open the Behaviors panel and select drag layer from actions. The following figure:
( large picture please enlarge and view )
In the Layer pop-up menu, select the layer you want to drag, as shown in: Select Layer Layer1.
Choose limit or no limit from the Move pop-up menu. Figure: Select "No Limit".
Enter a value, in pixels, for the drop target in the left and top text boxes.
The drop target is a point where you want the visitor to drag the layer to that point. When the left and top coordinates of the layer match the values entered in the left and top text boxes, the layer is assumed to have reached the drop target. These values are relative to the upper-left corner of the browser window.
Enter a value (in pixels) in the Align distance text box to determine how close the visitor must be to the target in order to align the layer to the target. A larger value can make it easier for visitors to find a drag-and-drop target.
Note that the action in the Behavior panel is onload. Save the page, F12 Preview.
Don't forget we are studying! Open the appropriate code view to see the new code in the file, so we can be familiar with the code AH!
Note: This example is just a simple drag layer instance, you can give full play to your imagination, make more complex drag layer effect, such as "jigsaw puzzle" is a typical application of drag layer, the use of a very wide range, we can try to do.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
