How to use Dreamweaver to make drag and drop effect

On the Internet, we can often see some very practical drag-and-drop effects, 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, a large picture of a shopping box or shopping cart, plus a few small pictures representing items. I have a shopping bag here, and a few things, they are: mobile phones, game handles and cars (WOW! Cars can also be dragged into shopping bags!).

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. The effect is shown in Figure 1 after completion.

Figure 1

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

Figure 2

In this dialog box, you can set properties for several layers, respectively. We set the layer that was inserted into the shopping bag image as "unconstrained layer", and the remaining layers are set to removable layer (constrained). There is also a "Advanced" option on this dialog, click it, check the "when Drag" option on this panel, and then set the "ring layer to front,then" option to "restored Z-index".

Figure 3

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?