Making drag-and-drop effects with Dreamweaver

Source: Internet
Author: User
Tags insert dreamweaver
Dreamweaver on the Internet, we can often see some very practical drag-and-drop effect, especially when applied to online shopping, visitors can directly drag the selected items to the shopping box or shopping cart, very convenient and interesting. But most people do not know, in fact, the behaviors in Dreamweaver can make the same effect. If you are interested, join me in making a shopping box with drag and drop effects.
Before doing the drag-and-drop page, first we have to prepare some pictures. For example, as a shopping box or shopping cart
Big picture, plus a few small pictures representing the items. I've got a shopping bag here and a few more items: cell phone, game handle and car.
With the pictures ready, we can start our work. Open Dreamweaver, create a new page, select the Layer tool in the object panel, and then drag a layer over the page with the mouse (or select "Insert/layer" to insert a new layer). Then, put the mouse in the layer, then select object/Insert Image tool, and insert a picture that you just prepared in this layer.
Repeat the above action, then insert 3 layers, then insert each of the other pictures you have prepared in the 3 layers.

Okay, here's the big step. Clicking on "Window/action" will bring up the "action (Behaviors)" dialog box. Click on the "+" above the dialog box, there will be a pop-up menu, select the menu "Drag Layer", and then pop-up, is the "Drag Layer" dialog box.

Repeat the above steps, set the properties of several other layers, set up a good "behaviors" dialog box in the Middle text box has 4 more "onLoad" tag.
OK, set this up, our work is done, do not forget to save the page, and then press the "F12" button to see you do drag the page cool?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.