在網上，我們經常可以看到一些非常實用的拖拽效果，特別是應用於網上購物時，訪問者直接就可以把選中的物品拖拽到購物箱或者購物車裡，非常方便、有趣。不過大多數人不知道，其實用Dreamweaver中的Behaviors也可以做出同樣的效果來。如果你有興趣，就和我一起來製作一個具有拖拽效果的的購物箱吧!
在做拖拽效果的網頁之前，首先我們要準備一些圖片。比如用作購物箱或購物車的一張大圖片，外加幾張代表物品的小圖片。我在這兒準備了一個購物袋，還有幾樣物品，它們分別是：手機、遊戲手柄和汽車(哇!汽車也可以拖進購物袋中啊!)。
準備好了圖片，就可以開始我們的工作了。開啟Dreamweaver，新建一個頁面，在物件面板中選擇圖層工具，然後用滑鼠在頁面上拖出一個圖層來(或者選擇“Insert/Layer”，插入一個新層)。然後，把滑鼠放進層中，再選擇“物件/插入影象工具”，在此圖層中插入剛才準備好的一個圖片。
重複上面的.動作，再接著插入3個圖層，然後在此3個圖層中分別插入你準備好的另外幾張圖片。完成後效果如圖1。
圖1
好了，重要的一步來了。點選“視窗/動作”，會彈出“動作(Behaviors)”對話方塊來，如圖2。點選對話方塊上方的“+”號後，會再彈出一個選單，選擇此選單中的“Drag Layer”，接著再彈出的，就是“Drag Layer”對話方塊了，如圖3。
圖2
在此對話方塊中可以分別設定幾個圖層的屬性。我們把插入購物袋影象的那個圖層設定為“不可移動層(Unconstrained)”，其餘的幾個圖層設定為“可移動層(Constrained)”。在此對話方塊上還有一個“Advanced”選項，點選它，在此面板上勾選“When Drag”選項，然後再把“Ring layer to front，then”選項設定為“Restored z-index”就可以了。
圖3
重複上述步驟，分別設定好其他幾個圖層的屬性，設定好的“Behaviors”對話方塊的中間文字框中多出了4個“onLoad”標記。
