這篇文章里，作者教大家如何在Axure用中繼器制作一個拖動換位選擇器的原型模板，想了解的同學(xué)，不妨來看一下。

拖動換位選擇器通常用于從一個列表中選擇項目并將其移動到另一個列表中。用戶可以通過拖動選項來實現(xiàn)選擇和移動。這種交互方式在許多Web應(yīng)用程序中很常見，特別是在需要對項目分組的情況下。

所以今天作者就教大家怎么在Axure用中繼器制作一個拖動換位選擇器的原型模板，具體效果如下所示：

一、效果展示

1. 鼠標拖動選項，選項跟隨鼠標移動；
2. 鼠標松開時，如果選項在對應(yīng)區(qū)域，就在對應(yīng)區(qū)域添加該選項，原區(qū)域的該選項刪除；
3. 鼠標松開時，如果選項不在對應(yīng)區(qū)域，選項返回鼠標拖動前的位置
4. 如果左側(cè)或右側(cè)沒有任何一個選項，就在該區(qū)域顯示提示圖文，提示可從其他區(qū)域添加選項

二、制作教程

1. 材料準備

我們需要做選擇器的外框，提示的圖文，以及選項的選擇器；

外框，我們用矩形制作就可以了，制作時增加一個選中樣式，后續(xù)會通過交互，選項移入后有一個變色效果，這個變色效果就是通過矩形的選中樣式實現(xiàn)的；

什么是B端产品经理？和C端产品经理有什么区别？

B端产品经理中的B是Business，商业的意思，B端产品经理首先就要理解这个职位的重要性，要设计出更适合这个项目需求的产品方案，B最终产品经理在日常工作中...

查看详情 >

提示圖文，我們用插畫+文字組成組合，如果默認沒有選項就顯示，如果有選項就默認隱藏；如下圖所示擺放：

選項選擇器，我們用中繼器制作，中繼器內(nèi)部我們需要一個圖標+矩形（標簽），默認的表現(xiàn)要設(shè)置一個選中的樣式，這樣后續(xù)拖動是可以讓他變色，擺放如下圖所示

因為需要拖動，所以我們要將這個兩個元件轉(zhuǎn)為動態(tài)面板；

中繼器表格里，默認一列，里面填寫默認選項的信息

我們首先要加中繼器表格里的信息，設(shè)置到中繼器的矩形（標簽）里，如果是axure10的話，我們用點擊中繼器表格里的鏈接按鈕，選擇矩形元件即可；如果是axure8或9，就要在中繼器每項加載時，用設(shè)置文本的交互，將item.column0列的值設(shè)置到矩形中

這樣一邊的選擇器就完成了，我們把所有元件復(fù)制多一個放置到右邊，調(diào)整提示文字，中繼器表格里的選項信息即可，這樣基本的材料就弄好了

2. 交互制作

下面，我們以左側(cè)選項移動到右側(cè)為例，在中繼器每項加載時，我們用隱藏的交互，隱藏對應(yīng)的提示組合，因為中繼器能加載，代表里面有選項，有選項就不用顯示提示文字，兩邊的中繼器都是這樣操作。

鼠標拖動選項的動態(tài)面板時，我們用移動的交互，將選項跟隨鼠標移動，并且用設(shè)置選中的交互，讓標簽矩形選中變色，這里還要考慮位置高低的問題，如果右側(cè)元件在上方，移動左側(cè)選項到右側(cè)，移動過程就會變遮擋；如果左側(cè)元件在上方，移動右側(cè)選項到左側(cè)，移動過程也會被遮擋，所以移動時，我們要用至于頂層的交互，將選項置于頂層，這樣無論左移右還是右移左都沒有問題啦。

移動的過程中，如果選項接觸到右側(cè)的組合，我們就用選中的交互讓右側(cè)的背景矩形變色顯示，否則，就不選中。

同樣，在拖動結(jié)束就是鼠標左鍵松開后，我們要判斷這個選項是否接觸到右側(cè)，如果接觸到了，代表這個選項要增加到右側(cè)，我們用添加行的交互，將這個選項的信息添加到右側(cè)選項中繼器里，然后用刪除行的交互，將該選項從左側(cè)中繼器里刪除。

這里還需要考慮左側(cè)，選項的數(shù)量，如果只有最后一個，移動過去之后，相當于為0，就需要顯示對應(yīng)的提示圖文，我們用顯示的交互顯示即可。最后，我們用取消選中的交互，將前面背景矩形恢復(fù)為未選中的默認樣式。

如果沒有接觸到右側(cè)組合，就是不添加，不添加就恢復(fù)原來的樣式，我們用移動的交互，將該選項移動回開始的位置，然后用取消選中的交互，將標簽取消選中

右邊移動到左邊是同樣的思路和同樣的交互，只不過對象編程左邊，你們可以用同樣的方式完成。

這樣我們就完成了拖動換位選擇器的原型模板了，后續(xù)使用也很方便，只需要在中繼器表格里填寫對應(yīng)的選項信息，預(yù)覽后即可自動生成對應(yīng)的效果。

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