將圖片部件裝換成動態(tài)面板

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage1.png" alt="image" />

首先打開AxureDragAndDropImages.rp 然后打開 Drag and Drop Images 頁面。

在設(shè)計區(qū)域選中第一張圖片的縮略圖。先右鍵單擊圖片在彈出的菜單中選中 Convert to Dynamic Panel，這樣就可以讓其可拖拽。

將這個面板標(biāo)記為 Batch1。

添加 OnDrag 事例到 Move with drag

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage2.png" alt="image" />

為了拖動圖片，通過一個動作添加一個事例到 OnDrag 事件然后指定到 Batch1 面板。一般地，這個移動動作被設(shè)置到 Move Batch1 with drag，點擊 OK 關(guān)閉事例編輯器。

添加 OnDragStart 事例

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage3.png" alt="image" />

當(dāng)用戶拖動圖片時，我們想要設(shè)置圖片有一個狀態(tài)可以顯示下面的信息， Drop an image here to remove it from the batch.

在拖動開始時我們想設(shè)置這個面板，所以通過設(shè)置 Set Panel State 添加一個事例到 Batch1 的 OnDragStart 事件。指定圖像帶面板和刪除的狀態(tài)。單擊 OK 關(guān)閉編輯器。 OnDragStart 案例添加應(yīng)該類似于上面的截圖。

添加條件到 OnDragDrop 和 事例 1

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage4.png" alt="image" />

當(dāng)你拖動圖片進入頁面時，你展現(xiàn)的交互效果取決于你的拖動方式。

在第一個條件中，我們想檢查是否是拖動圖像的頂部帶區(qū)域，我們添加一個事例到 OnDragDrop 事件，點擊
Add Condition 然后添加條件 “If area of widget Batch1 is over area of widget Image Strip”。 點擊 OK 關(guān)閉 Condition Builder 。

隱藏某批次的圖片

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage5.png" alt="image" />

當(dāng)圖片拖進 Image Strip 區(qū)域時，我們想將其從批次中移除，所以在事例編輯器中，選中 Batch1 面板的 Hide 選項，然后添加一個平淡的動畫。

設(shè)置 Image Strip 返回默認狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage6.png" alt="image" />

設(shè)置 Image Strip 的默認狀態(tài)，打開事例編輯器，選中 Image Strip 面板的 Set Panel State 設(shè)置默認狀態(tài)。

測試原型，當(dāng)你拖動第一個圖片進入 Image Strip 時，圖片將會漸漸淡出，而 Image Strip 將會恢復(fù)默認狀態(tài)。

添加第二條件到 OnDragDrop 事件

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage7.png" alt="image" />

現(xiàn)在我們另一個條件是如果圖片從 Image Strip 被拖動到其他區(qū)域。

在 Batch1 面板中，通過添加動作 Move Batch1 to x,y before drag 第二事例到 OnDragDrop 事件中。

設(shè)置 Image Strip 返回默認狀態(tài)

http://wiki.jikexueyuan.com/project/axure/images/draganddropimage8.png" alt="image" />

除了移動圖像回到原來的位置，我們也要設(shè)置 Image Strip 返回默認狀態(tài)。所以我們要添加第二個動作 Set Image Strip state to Default State 到這個事例中去

當(dāng)這個事例符合第一個條件時，這個事例被自動這是為 Else If True。

預(yù)覽這個原型然后測試他。當(dāng)你拖動圖片縮略圖到其他區(qū)域而不是 Image Strip 時，他將回到之前的位置，然后 Image Strip 會返回到默認的狀態(tài)。