2023年Axure高保真教程：拖動排序-扣款順序

Axure高保真教程：拖動排序——扣款順序隨著移動支付的進展，移動支付的途徑和方式也越來越多，常見的有錢包余額支付、支付寶支付、微信支付、銀行卡支付……隨著綁定的賬戶越來越多，我們需要一個設(shè)置扣款挨次的功能頁面。

所以今日就教大家假如做一個拖動排序的扣款挨次的原型模板，便利大家工作中能快速運用。

一、效果展現(xiàn)

1、可以上下拖動某一賬戶，鼠標(biāo)松開時，將賬戶固定到該位置。

2、使用中繼器制作，使用時，只需要在表格中導(dǎo)入圖標(biāo)和文字，既可以生成高保真效果。

原型地址：/#g=1

二、制作教程

由于中繼器里有一個排序大事，所以我們這個原型模板主要用中繼器來制作。

1.中繼器的內(nèi)部材料

在中繼器里，我們需要以下材料，圖片元件（賬戶的圖標(biāo)）、文本標(biāo)簽（賬戶文字）、拖動圖標(biāo)、背景矩形，如下如所示擺放：

其中背景矩形默認(rèn)白色，選中顏色為淺藍色，將上面全部內(nèi)容組合在一起。鼠標(biāo)移入組合時，我們用選中的交互，選中背景矩形，這樣就會變成藍色，鼠標(biāo)移出時，取消選中背景矩形，這樣就會變回白色，這樣就做出移入高亮變色的效果。

然后我們要把整個組合轉(zhuǎn)為動態(tài)面板，由于只有動態(tài)面板才可以拖動。

2.中繼器表格的設(shè)置

中繼器表格里我們共需要3列：

no：按12345……挨次填寫即可，后續(xù)會用于排序Column1：對應(yīng)中繼器里面的文本標(biāo)簽（賬戶文字）pic：對應(yīng)中繼器里面的圖片元件（賬戶的圖標(biāo)）

在中繼器每項加載時，我們用設(shè)置文本的交互，將Column1列的值設(shè)置到中繼器里面的文本標(biāo)簽（賬戶文字），再用設(shè)置圖片的交互，將pic列的圖片值設(shè)置到中繼器里面的圖片元件（賬戶的圖標(biāo)）。

中繼器載入時，我們還要根據(jù)no列，對中繼器進行排序。

后續(xù)拖動的時候就是通過這個排序來完成移動到哪里就停在哪的。

3.拖動排序的設(shè)置

鼠標(biāo)拖動中繼器內(nèi)部的動態(tài)面板之前，我們需要復(fù)制中繼器內(nèi)部的組合，就是第1點里那幾個元件，可以直接復(fù)制那個組合的動態(tài)面板，復(fù)制到中繼器外部，由于在中繼器里假如上下拖動，只會導(dǎo)致這行變高或矮，無法實現(xiàn)拖動的影像效果。所以我們把它復(fù)制到中繼器外面。外面這個動態(tài)面板默認(rèn)隱蔽。

在鼠標(biāo)開頭拖動中繼器內(nèi)部的動態(tài)面板時，這是先要用顯示的交互，將他顯示出來。顯示出來之后還需要移動到鼠標(biāo)對應(yīng)的位置所在的行，所以這里還要用移動大事，將他移動到對應(yīng)的位置，對應(yīng)位置，x值其實就是中繼器的x值，y值就是中繼器的y值+（所在的行數(shù)-1）*每行的高度。

移動到合適位置之后，我們用設(shè)置文本的交互，將Column1列的值設(shè)置到文本標(biāo)簽，再用設(shè)置圖片的交互，將pic列的圖片值設(shè)置到圖片元件。

鼠標(biāo)拖動中繼器內(nèi)部動態(tài)面板的過程中，我們用移動的時間，移動中繼器外部的動態(tài)面板，然他跟隨鼠標(biāo)垂直移動即可。

鼠標(biāo)拖動中繼器內(nèi)部動態(tài)面板拖動結(jié)束時，我們用隱蔽的交互，將中繼器外部用于幫助顯示的動態(tài)面板隱蔽起來。

然后我們要記錄移動了多少格距離，我們可以用TotalDragY獵取到在y軸上垂直移動的距離，再除以中繼器里一行的高度，其實就是動態(tài)面板的高度，得出移動了多少格。

知道移動多少格之后，我們還要考慮一個問題，就是移動的時候會不會鼠標(biāo)拖動已經(jīng)完全超出的中繼器的范圍，例如中繼器只有5個，我們在其次格始終往下拖動，拖出了10格的范圍，那這樣其實只是移動了3格，所以我們要對移動的格子數(shù)進行一個修正。

假如記錄移動的格數(shù)+移動當(dāng)前行的no值大于，中繼器的可見項目數(shù)，我們就將移動的格數(shù)設(shè)置為，中繼器的可見項目數(shù)-當(dāng)前行no的值。

假如記錄移動的格數(shù)小于1-當(dāng)前行no列的值，這種狀況是向上移動會消失負(fù)數(shù)的情形。假如條件成立，我們就將移動的格數(shù)設(shè)置為1-當(dāng)前行no列的值。

假如移動格數(shù)小于0就是向上拖動，我們用更新行的交互，更新條件為目標(biāo)行no小于當(dāng)前行no值，并且，大于當(dāng)前行no值+移動格數(shù)，我們把他們的no設(shè)置為原來的值+1。然后再更新當(dāng)前行no值加上移動的格數(shù)。例如現(xiàn)在在4格，向上移動了2格，4-2等于2，這格應(yīng)當(dāng)更新為其次格，但是之前的其次格和第三格就應(yīng)當(dāng)先更新更新為第三格和第四格。

假如移動格數(shù)大于0就是向下拖動，和上面原理是一樣的，只不過反過來，例如想在在第四格，向下移動了兩格，第四格就變成第6格，那原來的第六格應(yīng)當(dāng)要減一變成第五格，原來的第五格也要減一變成第四格。所以先更新符合條件的，就是目標(biāo)行的no值要大于當(dāng)前行no值（4），并且小于等于當(dāng)前行的no值+移動的格數(shù)，上面的案例就是要大于等于6（4+2）。所以就是第四格往下移動兩個，移動到的是原本的第五第六格，他們的no值要在原來的基礎(chǔ)上-1。

最終再更新當(dāng)前行的no值，就是第四格的值，只需要加上移動的格數(shù)即可。

這樣我們就完成