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

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

【原型效果】

1. 鼠標拖動選項，選項跟隨鼠標移動；

2. 鼠標松開時，如果選項在對應區域，就在對應區域添加該選項，原區域的該選項刪除；

3. 鼠標松開時，如果選項不在對應區域，選項返回鼠標拖動前的位置

4. 如果左側或右側沒有任何一個選項，就在該區域顯示提示圖文，提示可從其他區域添加選項

【原型預覽含下載地址】

https://axhub.im/ax9/10fc5fb77521f868/#g=1&p=拖動穿梭選擇器

【制作教程】

1. 材料準備

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

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

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

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

因為需要拖動，所以我們要將這個兩個元件轉為動態面板；

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

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

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

2. 交互制作

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

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

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

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

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

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

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

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

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

本文內容由微信公眾號：Axure高保真原型原創發布，未經許可，禁止轉載和商用。