在移動端操作中，拖動擺放圖標(biāo)起著相對重要的作用，那么我們有沒有可能在Axure中利用中繼器，制作拖動擺放的交互效果呢？本文作者便進(jìn)行了拆解，一起來看。

拖動擺放圖標(biāo)在移動端操作中扮演了重要的角色，允許用戶自定義其設(shè)備的界面，使其更符合其偏好和使用習(xí)慣。這可以提高用戶對設(shè)備的滿意度和舒適度，將最常用的應(yīng)用放置在易于訪問的位置，從而提高使用效率。

所以拖動擺放這類型操作不僅提高了用戶的個性化體驗(yàn)，還提高了操作效率和設(shè)備的可用性。這是移動操作系統(tǒng)為用戶提供的一種強(qiáng)大工具，有助于更好地滿足用戶的需求。

那今天作者就教大家，如何在Axure用中繼器，制作拖動擺放的交互效果，制作完成后可以實(shí)現(xiàn)一下效果：

一、效果展示

1）拖動效果：鼠標(biāo)可以拖動各個圖標(biāo)，對應(yīng)的圖標(biāo)可以跟隨鼠標(biāo)移動。

2）自動排列效果：拖動過程其他圖標(biāo)可以根據(jù)拖動圖標(biāo)所在的位置自動排列。

二、制作教程

那這個模板我們用中繼器來制作，因?yàn)橹欣^器制作完成之后，下次使用，我們只需要在中繼器表格里導(dǎo)入圖片和文字，即可自動生成交互效果，復(fù)用性比較強(qiáng)

1. 中繼器網(wǎng)格的制作

我們需要新建一個中繼器，在里面放置背景矩形、圖片元件和文本標(biāo)簽，如下圖所示：

在中繼器表格的布局里面我們可以設(shè)置為網(wǎng)格布局，根據(jù)自身需要設(shè)置每行項(xiàng)目數(shù)，案例中是水平分布，每行4個；

其中文本標(biāo)簽和圖片需要轉(zhuǎn)為動態(tài)面板，因?yàn)锳xure里面只有動態(tài)面板才有拖動這個交互。

中繼器表格里面我們需要增加4列：

• no列：按123456……順序填寫即可，后續(xù)用于排序
• pic列：對應(yīng)的圖片，可以鼠標(biāo)右鍵導(dǎo)入本地圖片，也可以填寫線上圖片的地址
• text列：填寫對應(yīng)的文字
• tuodong列：默認(rèn)為空即可，后續(xù)用于標(biāo)識哪一行被拖動

我們要將圖片和文字設(shè)置到中繼器對應(yīng)的圖片和文本標(biāo)簽的元件里，如果你用的是Axure10，直接點(diǎn)中繼器表格里的連接，選擇對應(yīng)元件的就可以了。如果你是Axure8、9，就要在中繼器每項(xiàng)加載時填寫交互，分別用設(shè)置文本和設(shè)置圖片的交互，將文本值和圖片值設(shè)置到文本標(biāo)簽和圖片元件里。

這樣網(wǎng)格列表就顯示出來了。

2. 拖動前的準(zhǔn)備

我們在拖動之前，要先準(zhǔn)備一個回顯拖動圖標(biāo)文字的組合，因?yàn)橹欣^器里每一行的都獨(dú)立的，如果在中繼器里面顯示拖動效果，就會將拖動行變高，這樣往后拖動就不能顯示自動擺放的效果。

所以我們需要增加一個組合，組合包括圖片和文本標(biāo)簽，這里和上面的是一樣的，尺寸和大小都是一樣的，默認(rèn)隱藏即可。

在鼠標(biāo)拖動動態(tài)面板時，我們用顯示的交互，將這個組合顯示出來，然后用設(shè)置文本和設(shè)置圖片的交互，將文本值和圖片值設(shè)置到文本標(biāo)簽和圖片元件里。

這樣就可以拖動，但是我們要將這個組合移動到我們鼠標(biāo)指針的位置，這里我們可以用cursor函數(shù)，分別獲取鼠標(biāo)的x坐標(biāo)值和y坐標(biāo)值，獲取之后，如果想指針的在圖片的中心點(diǎn)，我們還需要分別減去這個組合一半的寬度和一般的高度。

因?yàn)榍懊嬲f到，如果在中繼器里面顯示拖動效果，就會將拖動行變高，這樣往后拖動就不能顯示自動擺放的效果。所以我們要將拖動行里的動態(tài)面板先隱藏起來，我們可以通過控制tuodong列的值來控制他是否顯示，如果拖動列的值等于1，我們就用隱藏的交互，將動態(tài)面板隱藏，否則就顯示。所以我們在拖動開始的時候，就要用更新行的交互，將拖動列的值更新為1。

3. 拖動的交互

在鼠標(biāo)拖動動態(tài)面板時，我們用移動的交互，讓顯示組合跟隨鼠標(biāo)移動，這樣就可以讓拖動的組合跟隨鼠標(biāo)移動。

在拖動的過程中，我們還要對其余圖標(biāo)進(jìn)行按順序擺放。

這里我們其實(shí)要用到的根據(jù)no列來按順序擺放，例如將5拖動到2和3之間，這是我們把原來的3、4的no值改成4和5，將拖動圖標(biāo)所在行更新為3，這樣拖動排序的交互，原來的5，就可以在3的位置，原來的3、4，就變成4、5了，這個就是基礎(chǔ)的原理。

所以我們在中繼器載入時，先寫一個排序事件，讓中繼器按no列升序排列。

在拖動的時候，如果鼠標(biāo)指針接觸到對于圖標(biāo)背景矩形的范圍，我們就用更新交互，更新對應(yīng)對應(yīng)行的no列的序號值。

這里向前拖動和向后拖動的情況是不一樣的，如果將5向前拖動到2后面，那3、4就要變成4、5，是加1；如果將2拖動到5前面，那3、4是就要變成2、3是減一。

所以在拖動開始的時候，我們還要用設(shè)置文本的交互，將拖動的行的序號記錄下來，我們增加一個記錄的文本標(biāo)簽。

如果記錄的值>鼠標(biāo)移入對應(yīng)行的no值，就是向前移動，在更新行之前，我們要將移入行的no值記錄起來，因?yàn)楦轮缶蜁灰粯恿?，所以要事先記錄?？梢栽谕饷嬖黾右粋€隱藏的文本標(biāo)簽，用設(shè)置文本的交互，將他記錄起來。

然后用更新行的交互，目標(biāo)行大于等于當(dāng)前行no值且小于等于拖動行記錄的no值的行（不包括拖動的行），將他們的no值變成原來的值+1。

完成后在將拖動行no的值更新為我們之前選移動行的no值。

如果記錄的值<鼠標(biāo)移入對應(yīng)行的no值，就是向后移動，這里和前面一樣，在更新行之前，我們要將移入行的no值記錄起來，因?yàn)楦轮缶蜁灰粯恿?，所以要事先記錄?？梢栽谕饷嬖黾右粋€隱藏的文本標(biāo)簽，用設(shè)置文本的交互，將他記錄起來。

然后用更新行的交互，目標(biāo)行小于等于當(dāng)前行no值且大于等于拖動行記錄的no值的行（不包括拖動的行），將他們的no值變成原來的值+1。

完成后在將拖動行no的值更新為我們之前選移動行的no值。

這樣就完成一次判斷，因?yàn)橐苿拥倪^程是動態(tài)的，所以我們需要不端的去判斷，來排序，所以我們可以給這個交互寫給循環(huán)，用等待事件和觸發(fā)事件，經(jīng)過指定時間觸發(fā)一次交互，案例中是0.01秒。

最后拖動結(jié)束后，我們用隱藏的交互，將顯示的組合設(shè)置為隱藏。然后還要將中繼器里前面拖動開始時隱藏起來的內(nèi)容重新顯示，因?yàn)榍懊媸峭ㄟ^tuodong列的值來控制是否顯示的，tuodong列的值等于1就隱藏，所以我們用更新行的交互，將當(dāng)前行tuodong列的值更新為不等于1的任意值即可，一般我習(xí)慣用0。

這樣我們就完成了中繼器網(wǎng)格拖動擺放的原型模板，后續(xù)使用也很方便，只需要在中繼器表格里導(dǎo)入圖標(biāo)和填寫對應(yīng)的文字，即可自動生成拖動擺放的交互效果。

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