本文將為大家介紹如何用Axure實現列表拖動排序的上下拖動，希望該教程對你有所幫助。

最近使用Axure過程中碰到要對列表做排序，自然想到的是用中繼器來實現。看了這篇文章《Axure教程：列表拖動排序的實現方式》 受到了不少的啟發，但是只能向上拖動畢竟不太好，經過研究發現還是有辦法實現上下拖動的。

我使用的是Axure RP 9，如果是Axure RP 8原理上基本相同。

一、原型原理

要進行拖動排序，主要是計算拖動到達的位置處於整個列表的相對位置，再進行插入。

二、思考過程

要進行拖動，就要使用動態面板。

動態面板放在中繼器里可以很容易的獲取到中繼器里的數據

但是如果直接拖動動態面板，就會像上面提到的文章一樣，只能往上拖動，往下拖動會把排在下方的條目往下推，達不到排序的目的。

這裡只需要將被拖動的元件放在中繼器外，拖動拖成中將中繼器里的數據放在被拖動的元件上即可！

三、動手實現

01 中繼器

我們先拖入一個中繼器，在正常的數據以外增加一列標題為OrderNumber

Name列填入A ~ E

OrderNumber列填入0 ~ 4

中繼器內矩形長寬改為200*40方便點擊拖動

再對中繼器添加一個載入時按照OrderNumber升序排序

02

將中繼器里的元件複製一份放在中繼器外，取名“拖動塊”，並設置載入時隱藏。

03

中繼器外面放一個按鈕，主要用來觸發排序和整理OrderNumber，也設置為載入時隱藏。

04

在中繼器里放入一個動態面板，用來觸發拖動。

05

下麵我們就來設置動態面板上的互動：

1）拖動開始時

• 設置拖動塊的文本為[[Item.Name]]
• 移動拖動塊“到達”所鼠標所指向的條目的位置，通過OrderNumber來計算即可

（X坐標為 中繼器的x坐標；Y坐標為 中繼器的y坐標 + 該條目的序號 * 每個條目的高度）

顯示拖動塊

2）拖動時，移動拖動塊跟隨拖動

我這裡並沒有添加邊界，如果需要也可以添加上。添加邊界要註意一個地方，y軸上要留出空間，允許拖動到第一個條目的上方。

3）拖動結束時

計算中繼器和拖動塊y坐標的距離來確定OrderNumber，值為 [[(LVAR2.y-LVAR1.y)/40]]

觸發中繼器外的按鈕

按鈕單擊時 將中繼器的OrderNumber列更新為[[TargetItem.index-1]]。

OrderNumber用來排序的同時，也用來計算拖動塊出現的位置，所以拖動一次後就要更新為0 ~ N-1的整數，TargetItem.index是從1開始，所以要減1。

被更新的行的順序就是當前排序的順序，所以這樣更新不會改變當前的排序。

規則寫的是true，在實際使用中可以用其他條件，比如該行的可見性等條件來更新， 經測試，中繼器篩選不顯示的行，不會被更新OrderNumber。

移動拖動塊到達排序後的位置

將移動的過程添加一個200ms的動畫

等待200ms後把拖動塊隱藏起來，整個拖動排序就完成了

效果完成了，我們還可以在中繼器里的條目上，加入一塊相同尺寸的75%不透明度的矩形，拖動開始時顯示，拖動結束時隱藏，再加上文字提示可以拖動排序，頁面的效果就能更擬真。

寫在最後

有人說也就幾條註釋或跟技術人員幾句話就能交待過去，何必花功夫去模擬這個效果 。但如果時間允許，我們我們還是應該儘量將頁面效果用最直觀的方式表現出來，方便跟客戶展示，也方便設計師、程序員查看。

本文由@Goffe 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議