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

最近使用Axure過程中碰到要對列表做排序，自然想到的是用中繼器來實現(xiàn)?？戳诉@篇文章《Axure教程：列表拖動排序的實現(xiàn)方式》 受到了不少的啟發(fā)，但是只能向上拖動畢竟不太好，經(jīng)過研究發(fā)現(xiàn)還是有辦法實現(xiàn)上下拖動的。

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

一、原型原理

要進(jìn)行拖動排序，主要是計算拖動到達(dá)的位置處于整個列表的相對位置，再進(jìn)行插入。

二、思考過程

要進(jìn)行拖動，就要使用動態(tài)面板。

動態(tài)面板放在中繼器里可以很容易的獲取到中繼器里的數(shù)據(jù)

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

這里只需要將被拖動的元件放在中繼器外，拖動過程中將中繼器里的數(shù)據(jù)放在被拖動的元件上即可！

三、動手實現(xiàn)

01

中繼器

我們先拖入一個中繼器，在正常的數(shù)據(jù)以外增加一列標(biāo)題為OrderNumber

Name列填入A ~ E

OrderNumber列填入0 ~ 4

中繼器內(nèi)矩形長寬改為200*40方便點擊拖動

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

02

將中繼器里的元件復(fù)制一份放在中繼器外，取名“拖動塊”，并設(shè)置載入時隱藏。

03

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

04

在中繼器里放入一個動態(tài)面板，用來觸發(fā)拖動。

05

下面我們就來設(shè)置動態(tài)面板上的互動：

1）拖動開始時

• 設(shè)置拖動塊的文本為[[Item.Name]]
• 移動拖動塊“到達(dá)”所鼠標(biāo)所指向的條目的位置，通過OrderNumber來計算即可（X坐標(biāo)為 中繼器的x坐標(biāo)；Y坐標(biāo)為 中繼器的y坐標(biāo) + 該條目的序號 * 每個條目的高度）
• 顯示拖動塊

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

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

3）拖動結(jié)束時

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

• 觸發(fā)中繼器外的按鈕

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

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

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

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

• 移動拖動塊到達(dá)排序后的位置

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

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

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

寫在最后

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

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

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