筆者在本文中介紹了如何用Axure實現(xiàn)分類欄拖動效果的操作步驟，以及實現(xiàn)過程中的一些心得體會。

操作步驟

1. 一個轉(zhuǎn)換為動態(tài)面板的矩形

這里需要注意，轉(zhuǎn)換為動態(tài)面板后要將動態(tài)面板默認勾選的自動調(diào)整為內(nèi)容尺寸的勾選取消掉！

2. 將動態(tài)面板里面的矩形再次轉(zhuǎn)換為動態(tài)面板

這里不需要取消勾選。

3. 在面板2里面放任意多個超出面板1寬度的矩形，這里我放了6個矩形

4. 設置面板2的交互動作

5. 預覽看看效果

（1）初始狀態(tài)

（2）拖動后

小記

1. 當動態(tài)面板的“自動調(diào)整為內(nèi)容尺寸”勾選取消掉后，會在編輯面板里面出現(xiàn)藍色的方框

這個藍色方框是指外面那個動態(tài)面板的大小，提示用戶預覽時只有藍色方框內(nèi)的內(nèi)容會顯示出來，假如想要藍色方框以外的內(nèi)容顯示出來，則需要我們通過設置交互動作——拖動，才能將范圍外的內(nèi)容拖到范圍內(nèi)顯示出來。

2. 拖動的界限值的計算

這里首先邊界都設定為左側(cè)，但>=-[[This.width-350]]，這350很多人不知道怎么來的。其實就是外面那個動態(tài)面板的寬度。像我這個原型就是：

外面的動態(tài)面板寬度：

350這個數(shù)值就來自這里。

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議