在很多任務(wù)管理，計劃管理類的應(yīng)用中，大都有對列表進(jìn)行拖動排序的功能，這樣非常方便用戶根據(jù)自己的需要進(jìn)行排列。但是用 Axure 實現(xiàn)這一功能，網(wǎng)上似乎沒有一篇有關(guān)的教程，而你能搜索到的也只是關(guān)于 Axure 無法實現(xiàn)拖動排序的言論。但這是真的嗎？本文作者將在此給你揭曉答案。

經(jīng)過大鵬的多次嘗試，使用 Axure 制作拖動排序原型的難題終于有了很大進(jìn)展，但還沒有完全攻克。因為目前的實現(xiàn)效果還有很大的缺陷，實際上也只是實現(xiàn)了一部分的拖動排序功能。也就是，只能實現(xiàn)向上拖動排序，無法實現(xiàn)向下拖動排序。

先來看一下效果吧。

（點擊預(yù)覽）

一、原型解析

其實這個原型的交互也十分簡單，只有一種操作：拖動。

當(dāng)你選中一個條目向上拖動到它上面的條目的上面時，松開鼠標(biāo)，被你拖動的這個條目就會插入到你拖到的位置，同時將它下面的條目擠下去，從而達(dá)到重新排序的效果。

然后，你可以無限次的拖動。

但由于原型本身存在的缺陷，你只能向上拖動，向下拖動的時候是無法改變每個條目原本的順序的，也就是沒有辦法重新排序。

二、設(shè)計思路

這個原型其實有兩個要點：一是拖動，二是排序。

1、關(guān)于拖動

在Axure中實現(xiàn)拖動效果，不可避免的是要用到動態(tài)面板，在這個原型中，動態(tài)面板的作用除了實現(xiàn)拖動效果，還要進(jìn)行拖動后一系列邏輯的處理。

2、關(guān)于排序

如果單純的想實現(xiàn)排序，毫無疑問，中繼器是首選，它的必殺技之一就是排序。但是問題來了，中繼器能做排序了，可是能針對中繼器的一個條目做拖動嗎？其實，最開始的時候我也是不知道的，只是在實驗的過程中得到了意想不到的效果。

另外，還有一個關(guān)鍵的問題就是即使可以實現(xiàn)中繼器的拖動排序，那么排序字段的值怎么設(shè)置，因為拖動之后是要改變原本的排序字段的值的，這樣再進(jìn)行排序才能得到重新排序的效果。我最先想到的是通過拖動的位移來計算被拖動的對象處在來什么位置，然后計算出它所在位置的排序值。

三、制作過程

1、準(zhǔn)備中繼器

在工作區(qū)拖入一個中繼器，設(shè)置中繼器的屬性，你可以任意增加幾行或者幾列。

當(dāng)然至少要保證一列 Column0（你可以將它改為其他的名字），這一列用來排序的時候使用。所以。無論你增加多少行，Column0 列的值都要保證是一個自然數(shù)序列（當(dāng)然也不是必須，只是這樣在計算的時候會比較簡單一些）；然后其他的列就可以用于你想要顯示的內(nèi)容列，這些自定義就好列，我下面只舉一個最簡單的例子。

另外，設(shè)置中繼器的事件可以讓它顯示你設(shè)置的內(nèi)容。在我的案例中，則是讓中繼器中的矩形上顯示中繼器 Column1 的內(nèi)容。

2、將中繼器中的內(nèi)容轉(zhuǎn)為動態(tài)面板

在我這個例子中只有一個矩形，我將它專為動態(tài)面板，相信這個操作小伙伴們應(yīng)該都會，只需要在矩形上點擊右鍵，選擇“轉(zhuǎn)為動態(tài)面板”即可。

3、設(shè)置動態(tài)面板的交互事件

本文的重點就在這里了，這也是實現(xiàn)這個原型的關(guān)鍵。

（1）添加“拖動”事件

拖動事件的首要目的是要實現(xiàn)當(dāng)我們上下拖動條目時，可以使得條目能夠上下移動。

這時候小伙伴們可以預(yù)覽一下原型，會有意想不到的效果哦，也正是因為這個效果，成為本原型能夠?qū)崿F(xiàn)的關(guān)鍵。

（2）添加“拖動結(jié)束時”事件

上面那一步實現(xiàn)了將列表中的某個條目拖動其他條目的上面，然后我們期望的效果是，當(dāng)拖動結(jié)束時，被拖動的條目可以插入到剛才到位置。在前面的設(shè)計思路中，我已經(jīng)講過了實現(xiàn)原理。那接下里我要做的事情就是要獲得被拖動的條目的新的排序序號。

比如，我要把“E”拖動到“B”和“C”之間，我們知道“A、B、C、D、E”的排序序號分別是1、2、3、4、5，那么“E”要能夠排列在“B”和“C”中間，那“E”的新序號就要在2和3之間。

OK，接下來我們就通過一些動作讓“E”獲得拖動后的新的序號。

這里用到中繼器的一個動作“更新行”，就是更新中繼器中條目的數(shù)據(jù)。根據(jù)我們前面所說的，那我是要更新我拖動的那個條目的 Column0 列，然后它的值則是通過一個公式來計算得到。

我們來分解一下公式：

(0-TotalDragY)/40

這個的意思是計算出拖動了幾個條目的距離，其中40代表的是中繼器的每個條目的高度，要根據(jù)你實際的數(shù)值來寫。

Item.Column0-((0-TotalDragY)/40)

這個意思則是計算出我們想要的排序值了，只不過帶有很長的小數(shù)，其實到這里也可以了，后面的 toFixed(1) 只是用于將小數(shù)點保留1位，可以省略這步轉(zhuǎn)換。

得到排序值之后，我們理所當(dāng)然的就要給中繼器增加一個排序事件了，這個動作也是在“拖動結(jié)束時”執(zhí)行，因此我們再在剛才的“更新行”動作下增加一個“添加排序”動作。

這時候再去預(yù)覽一下原型，你會發(fā)現(xiàn)第一次的排序效果已經(jīng)可以實現(xiàn)了，但是頻繁拖動幾次之后就會發(fā)現(xiàn)排序亂套了，這是因為排序字段的值被修改了之后，計算出現(xiàn)了偏差（因為本來的順序是1、2、3、4、5，拖動排序一次之后可能變成了1、2、2.5、3、4，這時候再進(jìn)行拖動的時候套用上面的公式是有問題的）。

其實解決這個問題，我們只需要在一次拖動排序完成后，將每個條目的排序字段（Column0）的值按新的順序更新為自然數(shù)，但是這個動作是不能直接加在“拖動結(jié)束時”的事件上的，需要在中繼器外建立一個事件來執(zhí)行，可又需要在“拖動結(jié)束時”之后自動執(zhí)行，這時候就用到了 Axure RP 8 特有的事件——Fire Event（觸發(fā)事件）。

（3）添加“觸發(fā)事件”

在添加“觸發(fā)事件”之前，我們需要先加入一個隱藏按鈕，然后給它設(shè)置“點擊時”事件，在這個事件上執(zhí)行更新條目排序值的操作，然后添加“觸發(fā)事件”的時候讓它觸發(fā)按鈕上的這個“點擊時”事件。

之后再在第②步中的“拖動結(jié)束時”事件上增加“觸發(fā)事件”動作，去執(zhí)行隱藏按鈕上的“點擊時”事件。

到這里，基本的拖動排序就完成了，你可以在此基礎(chǔ)上進(jìn)行一些優(yōu)化，比如優(yōu)化一下拖動的交互效果，比如控制一下向下拖動時產(chǎn)生的問題等等。

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