Axure教程:表格拖動排序

編輯導語:排序是表格應用中常用的工具,本文作者分享了表格拖動排序的相關方法,介紹了其原理、材料準備以及互動設定的具體流程,一起來學習一下吧。

Axure教程:表格拖動排序

排序是表格中常用的互動,一般常用的是升序和降序,如果要隨心所欲的設定自定義表格,按自己的偏好任意調整的,就是拖動排序了,一般在自定義表格中比較常見。所以今天作者就教大家,如何製作滑鼠拖動表格中的某一行或者某一列並移動到表格中對應的位置。

Axure教程:表格拖動排序

原型預覽地址:https://y3av3g。axshare。com/#g=1

那下面我們一起開始製作吧。

一、原理介紹

主要用到的互動其實就是中繼器的排序事件,根據中繼器表格裡面的序號排列,拖動結束後,透過更新行的操作,更新列表中對應行的序號,這樣就可以實現拖動排序的效果。

例如列表中的第一行、第二行、第三行的序號分別為1、2、3,如果拖動第一行到最下的位置,那麼他們的序號就變成3、1、2,因為排序事件拖動後就會去到最下方。

當然了,這裡還需要一些計算公式,例如計算距離,拖動多遠,去到哪裡,以及序號的加減問題。我們會在下面講解互動的時候,詳細說明。

二、材料準備

主要材料是中繼器、動態面板、矩形元件。

1. 表格表頭設定

表頭其實就是用多個矩形拼在一起,需要幾列就幾個矩形。樣式根據自身需要設定即可,如下圖所示擺放:

2. 中繼器內部元件

中繼器裡主要的元件也是和多個多個矩形拼在一起,這裡的寬度要和上面表頭一樣,一一對應。如果需要移入高亮的效果,我們也可以增加一個背景矩形,設定移入時變色的互動樣式。如果要做斑馬線互動效果,也可以在中繼器樣式中設定背景顏色交替。

元件準備好之後,我們要把中繼器裡所有元件選中,右鍵轉為動態面板,因為只有動態面板才可以才可以拖動。

3. 中繼器表格

中繼器表格裡主要分兩種列,排序列和內容列。

排序列就是no,預設1234567順序填寫即可,不用於顯示,只用於邏輯互動。

內容列就是column1~6,對應表格元件對應的內容。

Axure教程:表格拖動排序

4. 其他元件

這裡主要是指文字標籤,只用於邏輯記錄,預設隱藏。

三、互動設定

1. 中繼器每項載入時

這裡我們只需要把中繼器表格裡column1~6的內容,設定到中繼器裡面對應的矩形即可。這裡用到設定文字的互動。

Axure教程:表格拖動排序

2. 中繼器載入時

載入時,我們設定中繼器排序,讓中繼器按照no列的升序排列,這樣後續移動更新了序號後,就能自動排序了。

Axure教程:表格拖動排序

3. 動態面板拖動結束時

這裡就是滑鼠鬆開的時候,即拖動結束了。

這裡我們首先要計算移動的距離,簡單來說就是計算移動了多少格。這裡我們主要用到TotalDragY函式,這個函式可以記錄拖動的垂直距離,我們用TotalDragY除以表格裡面一行的高度(其實就是矩形的高度),然後四捨五入,就可以得到他移動了多少格。

接下來我們就要分情況討論了

1)當前序號(行數)+移動格子>中繼器可以看到的總行數。例如中繼器總共8行,你移動的是第三行,序號就是3了,移動了9格距離,加起來就是12,12大於8,相當於第三行移到了最後。那這時我們就要需改移動格數的記錄文字了,他實際上移動的格數是中繼器的中行數-他的序號,即8-3=5格,即他向下移動5格就到底了。

Axure教程:表格拖動排序

2)移動格子1-當前序號(行數)。例如當前移動的是第三行,,序號就是3了,向上移動了10格,就是-10,小於1-3=-2,簡單來說就是移動到最上面的一行了。所以我們也是要修改移動格數的記錄文字了,他實際上移動的格數1-當前序號(行數),即1-3=-2格。即他向上移動2格就到頂了。

Axure教程:表格拖動排序

這樣就把真實需要移動的格數修正了,接下來我們還需要根據他是向上移動還是向下移動分別寫互動。這裡記錄移動格數如果是正,就是向下移動,如果是負數,就是向上移動。

我們先來討論向下移動的情形:

我們這裡用更新行的互動,更新對應行的序號。跟新的物件(條件)是,移動行的序號+移動格子數大於等於目標行,並且目標行大於等於當前行。

例如移動行是第三行,移動了兩格,移動行的序號+移動格子數大於等於目標行的結果為5,目標行大於等於當前行,即大於3。

大於3小於等於5的格子就是第四行和第五航,那需要改變的其實就是45兩格。我們更新他的序號,把它變成3和4就可以,即原來的序號-1。

除此之外,我們還要更新當前行,將他的序號更新為,當前的序號+移動的格子,即3+2=5,這樣向下移動就完成了。

然後再來討論向上移動的情形:

其實原理都是一樣的,首先更新目標行序號=移動行的序號,並且移動行序號+移動格數大於移動行序號。

例如移動的是第三行,向上移動了2格,那麼更新的行其實就是第一行和第二行。他們的序號從原來的1、2更新成2、3接即可,即原來的序號+1。

除此之外,我們還要更新當前行,即移動的行,將他的序號更新為,當前的序號-移動的格子,即3-2=1,這樣向上移動也完成了。

4. 其他互動

其他互動,可以是美化的互動,例如想把移動效果顯示出來,那我們可以在中繼器外部增加一個動態面板,在中繼器裡面動態面板移動時,即滑鼠拖動某一行內容時,我們用移動的互動,讓外面的動態面板跟隨滑鼠移動即可。

這裡因為我們是拖動行,所以移動時選擇跟隨滑鼠垂直移動。

當然了,我們還需要根據不同的行用設定文字的互動將表格內容傳遞出去,而且還需要在拖動開始時,用移動的互動將動態面板移動到對應行的位置。

這些都是美化效果,不是必須的,所以在這裡就不展開。

另外,如果你們是拖動列的話就選擇水平移動,如下圖所示的效果。

Axure教程:表格拖動排序

其實原理都是一樣的,只要把表格轉置一下,然後所有垂直的互動,改成水平就可以了。

做好以後,當我們再次使用時,只需要在中繼器的表格裡填寫選項即可,自動生成互動效果,是不是很方便呢?

那以上就是本期的全部內容了,感謝您的閱讀,我們下期見~

作者:做產品但不是經理;微信公眾號:Axure高保真原型;

本文由 @做產品但不是經理 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

頂部