隨著移動(dòng)支付的途徑和方式越來越多，綁定的賬戶也越來越多，這時(shí)便需要一個(gè)設(shè)置扣款順序的功能頁面。本文作者分享了一個(gè)拖動(dòng)排序的扣款順序的原型模板，一起來看一下吧。

隨著移動(dòng)支付的發(fā)展，移動(dòng)支付的途徑和方式也越來越多，常見的有錢包余額支付、支付寶支付、微信支付、銀行卡支付……隨著綁定的賬戶越來越多，我們需要一個(gè)設(shè)置扣款順序的功能頁面。

所以今天作者就教大家如果做一個(gè)拖動(dòng)排序的扣款順序的原型模板，方便大家工作中能快速運(yùn)用。

一、效果展示

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

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

二、制作教程

因?yàn)橹欣^器里有一個(gè)排序事件，所以我們這個(gè)原型模板主要用中繼器來制作。

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

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

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

然后我們要把整個(gè)組合轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才可以拖動(dòng)。

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

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

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

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

中繼器載入時(shí)，我們還要按照no列，對(duì)中繼器進(jìn)行排序。

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

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

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

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

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

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

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

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

知道移動(dòng)多少格之后，我們還要考慮一個(gè)問題，就是移動(dòng)的時(shí)候會(huì)不會(huì)鼠標(biāo)拖動(dòng)已經(jīng)完全超出的中繼器的范圍，例如中繼器只有5個(gè)，我們?cè)诘诙褚恢蓖峦蟿?dòng)，拖出了10格的范圍，那這樣其實(shí)只是移動(dòng)了3格，所以我們要對(duì)移動(dòng)的格子數(shù)進(jìn)行一個(gè)修正。

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

如果記錄移動(dòng)的格數(shù)小于1-當(dāng)前行no列的值，這種情況是向上移動(dòng)會(huì)出現(xiàn)負(fù)數(shù)的情形。如果條件成立，我們就將移動(dòng)的格數(shù)設(shè)置為1-當(dāng)前行no列的值。

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

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

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

這樣我們就完成了拖動(dòng)排序——扣款順序的原型模板了，后續(xù)使用也是很方便，只需要在中繼器表格里填寫對(duì)應(yīng)的賬戶信息，即可自動(dòng)生成交互效果。

以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見。