編輯導(dǎo)讀：隨著系統(tǒng)的升級，用戶的操作習(xí)慣的發(fā)生了改變，從以往的點點點，到現(xiàn)在的拖拉拽。拖動、滑動的操作在軟件操作里越來越常見。本文作者分享了如何用Axure制作拖動選擇器，希望對你有幫助。

隨著系統(tǒng)的升級，用戶的操作習(xí)慣的發(fā)生了改變，從以往的點點點，到現(xiàn)在的拖拉拽。拖動、滑動的操作在軟件操作里越來越常見。所以今天作者就教大家在Axure里如果使用中繼器以及動態(tài)面板，來做一個拖動選擇的穿梭選擇器。

原型預(yù)覽地址：https://xqvfpk.axshare.com/#g=1

一、材料準(zhǔn)備

選擇器分為可選欄目和已選欄目，兩邊的選擇器里面的元件都是一樣的，所以我們就以左側(cè)可選欄目選擇器展開說明。

具體材料包括：中繼器、背景外框

1、中繼器：內(nèi)部自帶的矩形轉(zhuǎn)為動態(tài)面板，因為在axure里面只有動態(tài)面板可以拖動，然后樣色需要設(shè)置成無邊框線，選中顏色為灰色，禁用顏色為藍(lán)色。

中繼器表格內(nèi)在默認(rèn)列Column0填入選項即可，如下圖所示

2、背景外框：用矩形制作，設(shè)置邊框顏色，置于中繼器選項下方即可。

二、交互制作

中繼器每項加載時時，設(shè)置中繼器內(nèi)部自帶矩形的文本值為item.Column0，即中繼器內(nèi)Column0列的值，這個交互是默認(rèn)存在的，如果我們沒有改過就不用變。

中繼器載入時，這里如果我們想固定選項的排序，那我們可以增加排序事件，如果不需要固定排序的話就可以不用增加

鼠標(biāo)移入動態(tài)面板時，我們用設(shè)置選中的交互選中中繼器內(nèi)部矩形，鼠標(biāo)移出動態(tài)面板時，我們用設(shè)置選中的交互取消選中中繼器內(nèi)部的矩形。這樣做是讓各個選項有一個移入變色的效果，因為之前我們設(shè)置矩形選中樣色是填充顏色為灰色，所以移入就會變灰色。那這里為什么不用鼠標(biāo)懸停時的交互呢，那是因為中繼器的bug，后續(xù)拖動選項后，雖然鼠標(biāo)移出了區(qū)域，但是中繼器還會以為鼠標(biāo)停留在原來的地方，導(dǎo)致自動讓下一個選項變色。所以我們就不用鼠標(biāo)懸停的交互樣式。

鼠標(biāo)拖動動態(tài)面板時，我要用移動事件，移動該動態(tài)面板跟誰水表在x軸方向移動，并且用置頂?shù)慕M合將該組合置頂，如果不置頂?shù)脑挘苿拥倪^程中就有可能被其他元件遮擋。然后我們還要禁用中繼器內(nèi)部的矩形，前面我們設(shè)置了禁用矩形的樣式為藍(lán)色，這樣做的原因就是為了有一個變色的效果。

完成到這一步，我們就可以復(fù)制整個組合，然后在右邊粘貼一個作為已選欄目的選擇器組合。

繼續(xù)回到左邊選擇器的交互，鼠標(biāo)拖動動態(tài)面板結(jié)束時，我們分兩種情況來討論

第一種是，鼠標(biāo)指針接觸到右邊已選欄目的組合，這代表想將該選項移到右邊的選擇器中，所以我們要執(zhí)行以下交互：

1、在右面的中繼器里添加行，添加的內(nèi)容為當(dāng)前選擇器移動的內(nèi)容，可以用變量選擇中繼器內(nèi)容的文本，或者直接用中繼器表格中的item.column0都可以。

2、在左邊的中繼器，即當(dāng)前中繼器中刪除行，刪除當(dāng)前行，即移動過去的選項。

3、啟用中繼器內(nèi)部矩形，因為前面移動的過程中禁用了，所以我們這里用啟用的交互將矩形重新啟用。

第二種情況：鼠標(biāo)指針沒有解除到右邊已選欄目的組合是，這代表用戶移錯了，并不是想移動該項到右邊，name我們就執(zhí)行以下交互：

1、用移動事件將動態(tài)面板移動回原來的位置。

2、啟用中繼器內(nèi)部矩形，因為前面移動的過程中禁用了，所以我們這里用啟用的交互將矩形重新啟用。

這樣我們就完成了左邊可選欄目的交互了，右邊已選欄目的交互和左邊的交互思路都是一致的，只是指針判斷的接觸范圍從右邊的選擇器改為左邊的選擇器，添加行變成是在左邊選擇器添加，右邊選擇器中刪除。

這樣我們就完成制作了，以后我們需要使用的話，只需要填寫在左邊中繼器的表格里填寫選項文字即可，自動生成交互效果，是不是很方便呢？

以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見~88

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議