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

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

首先打開(kāi)AxureDragAndDropImages.rp 然后打開(kāi) Drag and Drop Images 頁(yè)面。

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

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

添加 OnDrag 事例到 Move with drag

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

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

添加 OnDragStart 事例

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

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

在拖動(dòng)開(kāi)始時(shí)我們想設(shè)置這個(gè)面板，所以通過(guò)設(shè)置 Set Panel State 添加一個(gè)事例到 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)你拖動(dòng)圖片進(jìn)入頁(yè)面時(shí)，你展現(xiàn)的交互效果取決于你的拖動(dòng)方式。

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

隱藏某批次的圖片

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

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

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

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

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

測(cè)試原型，當(dāng)你拖動(dòng)第一個(gè)圖片進(jìn)入 Image Strip 時(shí)，圖片將會(huì)漸漸淡出，而 Image Strip 將會(huì)恢復(fù)默認(rèn)狀態(tài)。

添加第二條件到 OnDragDrop 事件

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

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

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

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

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

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

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

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