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

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

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

所以今天作者就教大家如果做一個拖動排序的扣款順序的原型模板，方便大家工作中能快速運用。

一、效果展示

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

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

二、制作教程

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

1. 中繼器的內部材料

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

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

然后我們要把整個組合轉為動態面板，因為只有動態面板才可以拖動。

2. 中繼器表格的設置

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

1. no：按12345……順序填寫即可，后續會用于排序
2. Column1：對應中繼器里面的文本標簽（賬戶文字）
3. pic：對應中繼器里面的圖片元件（賬戶的圖標）

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

中繼器載入時，我們還要按照no列，對中繼器進行排序。

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

3. 拖動排序的設置

鼠標拖動中繼器內部的動態面板之前，我們需要復制中繼器內部的組合，就是第1點里那幾個元件，可以直接復制那個組合的動態面板，復制到中繼器外部，因為在中繼器里如果上下拖動，只會導致這行變高或矮，無法實現拖動的影像效果。所以我們把它復制到中繼器外面。外面這個動態面板默認隱藏。

在鼠標開始拖動中繼器內部的動態面板時，這是先要用顯示的交互，將他顯示出來。顯示出來之后還需要移動到鼠標對應的位置所在的行，所以這里還要用移動事件，將他移動到對應的位置，對應位置，x值其實就是中繼器的x值，y值就是中繼器的y值+（所在的行數-1）*每行的高度。

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

鼠標拖動中繼器內部動態面板的過程中，我們用移動的時間，移動中繼器外部的動態面板，然他跟隨鼠標垂直移動即可。

鼠標拖動中繼器內部動態面板拖動結束時，我們用隱藏的交互，將中繼器外部用于輔助顯示的動態面板隱藏起來。

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

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

如果記錄移動的格數+移動當前行的no值大于，中繼器的可見項目數，我們就將移動的格數設置為，中繼器的可見項目數-當前行no的值。

如果記錄移動的格數小于1-當前行no列的值，這種情況是向上移動會出現負數的情形。如果條件成立，我們就將移動的格數設置為1-當前行no列的值。

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

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

最后再更新當前行的no值，就是第四格的值，只需要加上移動的格數即可。

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

以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。