Axure教程:列表拖動排序(中繼器實現上下拖動)
本文將為大家介紹如何用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協議
老師,請問一下版本問題導致的無法排序應該怎么解決呀,我刪除了default文件也不能排序!
建議直接重裝英文版
老師,請教一下:多列信息,如何左右拖動一列,改變該列的位置?
基本上把做法x和y軸換一下就可以了
如果是想行和列同時拖動排序,估計axure暫時還做不到,建議將這兩個功能分成兩個原型來做,反正最終目標都是讓程序員理解你的意圖
行和列同時拖動就是一起計算坐標唄。
比如手機圖標排序:https://5gn5xg.axshare.com/#id=whwe5s&g=1
老師可以更新一下原型嗎?
附件中的原型確實有問題,不能排序
中文補丁版本與axure版本不對會引發排序失敗,這是axure的問題,我也沒有辦法
我的做法就是直接用英文版
哦 排序 可以這樣 我說的是拖動替換的效果了
我仔細看了下 這個只設置了被拖拽之后的item的 num值,那目標位置原來的item 的num值沒有更新?這樣直接排序的話會有問題,例如將 D-》B, num值從 01234 -> 01214 排序之后 01124 就是從 ABCDE ->ABDCE 但是要的效果應該是 ADCBE ,所以要在更新D的num值為1的同時更新B的值為3才對。
老師您好,附件中的原型文件不能進行排序呀
我還特意去下載一下,能排序啊,或者你看看https://i50lcz.axshare.com
突然想到Axure的漢化版本不對容易引發排序無效的問題,可以看看把Axure rp9\lang目錄下的default文件刪掉用英文版來預覽看看
為啥英文版可以排序,中文版不能呢,這個版本問題怎么解決呢?
原型文件:
鏈接:https://pan.baidu.com/s/1-D3tDBg-GAE9PKxiHLxPjA
提取碼:1b89