中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

先來看一下效果吧。

（點擊預覽）

一、原型解析

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

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

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

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

二、設計思路

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

1、關于拖動

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

2、關于排序

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

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

三、制作過程

1、準備中繼器

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

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

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

2、將中繼器中的內容轉為動態面板

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

3、設置動態面板的交互事件

本文的重點就在這里了，這也是實現這個原型的關鍵。

（1）添加“拖動”事件

拖動事件的首要目的是要實現當我們上下拖動條目時，可以使得條目能夠上下移動。

這時候小伙伴們可以預覽一下原型，會有意想不到的效果哦，也正是因為這個效果，成為本原型能夠實現的關鍵。

（2）添加“拖動結束時”事件

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

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

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

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

我們來分解一下公式：

(0-TotalDragY)/40

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

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

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

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

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

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

（3）添加“觸發事件”

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

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

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

本文由 @RAEDME大鵬 原創發布于人人都是產品經理。未經許可，禁止轉載。