編輯導(dǎo)讀：拖動(dòng)選擇器又名滑動(dòng)選擇器或滑動(dòng)穿梭框，常用于左右列表框移動(dòng)數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的多項(xiàng)選擇。本文作者用Axure教大家如何制作拖動(dòng)選擇器，希望對(duì)你有幫助。

拖動(dòng)選擇器又名滑動(dòng)選擇器或滑動(dòng)穿梭框，常用于左右列表框移動(dòng)數(shù)據(jù)，實(shí)現(xiàn)數(shù)據(jù)的多項(xiàng)選擇。今天就教大家怎么用中繼器制作一個(gè)即方便使用，同時(shí)又具備高保真效果的拖動(dòng)選擇器的原型模板，具體效果如下圖所示：

原型地址：https://6tvhox.axshare.com/#g=1

那下面我們一起開(kāi)始制作吧。

一、材料準(zhǔn)備

這個(gè)原型我們用主要是用中繼器制作，這樣是這樣制作好以后，下次使用時(shí)只需要維護(hù)中繼器表格里面的數(shù)據(jù)既可以自動(dòng)生成交互效果，所以復(fù)用性比較高。

1. 左側(cè)可選欄目所需要的元件

文本標(biāo)簽：提示文字，案例中為可選欄目四個(gè)字

左側(cè)中繼器：命名為中繼器1，主要是與右邊的中繼器區(qū)分

中繼器內(nèi)默認(rèn)自帶矩形，我們根據(jù)實(shí)際需要調(diào)整一下樣式，案例中增加了選中樣式為灰色，禁用樣式為藍(lán)色。我們需要將矩形轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才有拖動(dòng)時(shí)的事件。

中繼器表格默認(rèn)自帶Column0列，在下面填寫(xiě)具體選項(xiàng)文字即可，如果數(shù)據(jù)多的話也可以從excel表格內(nèi)復(fù)制過(guò)來(lái)。

背景矩形：背景框，用矩形設(shè)置即可，至于中繼器下方即可

2. 右側(cè)已選欄目所需要的元件

基本上和左側(cè)已選欄目的元件一致，我們直接復(fù)制一個(gè)然后修改會(huì)更加快捷

文本標(biāo)簽：提示文字，案例中為已選欄目四個(gè)字

左側(cè)中繼器：命名為中繼器2，主要是與左邊的中繼器區(qū)分

中繼器內(nèi)默認(rèn)自帶矩形，我們根據(jù)實(shí)際需要調(diào)整一下樣式，案例中增加了選中樣式為灰色，禁用樣式為藍(lán)色。我們需要將矩形轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才有拖動(dòng)時(shí)的事件。

中繼器表格默認(rèn)自帶Column0列，這里已選欄目里默認(rèn)是空的，所以要把中繼器里所有行數(shù)據(jù)先刪除。

背景矩形：背景框，用矩形設(shè)置即可，至于中繼器下方即可

這樣我們就準(zhǔn)備好了所有的材料了，下面我們開(kāi)始制作交互。

二、交互制作

1. 中繼器的交互

這一步兩個(gè)中繼器里的交互都是一樣的，所以可以先做完這步再把左邊的中繼器復(fù)制到右邊

中繼器每項(xiàng)加載時(shí)：設(shè)置中繼器內(nèi)部矩形的文字為Item.Column0，這步同樣不需要自己去操作，中繼器自帶就有這個(gè)交互，如果你沒(méi)有刪的話。

中繼器載入時(shí)：這里因?yàn)槲蚁脒x項(xiàng)保持一個(gè)順序，所以我添加一個(gè)排序的交互，非必要，你們可以看情況增加。

2. 左側(cè)動(dòng)態(tài)面板的交互

鼠標(biāo)移入時(shí)：設(shè)置中繼器內(nèi)部矩形的狀態(tài)為真，因?yàn)榍懊嬖O(shè)置了選中樣式為灰色，所以就會(huì)與一個(gè)鼠標(biāo)移入停放變灰色的效果。

鼠標(biāo)移出時(shí)：設(shè)置中繼器內(nèi)部矩形的狀態(tài)為假，這樣相當(dāng)于一個(gè)回復(fù)默認(rèn)樣式的操作

鼠標(biāo)拖動(dòng)時(shí)：用移動(dòng)事件，將動(dòng)態(tài)面板沿水平方向跟著鼠標(biāo)拖動(dòng)，將左邊欄目整個(gè)組合置頂，不如不置頂?shù)脑?，就?huì)被右邊已選欄目的元件遮擋住。最后我們還要禁用矩形元件，因?yàn)榍懊嫖覀冊(cè)O(shè)置了禁用顏色為藍(lán)色，這樣做的目的也是拖動(dòng)時(shí)有一個(gè)變色的效果。

鼠標(biāo)拖動(dòng)結(jié)束時(shí)：這里要分兩種情況討論

第一種情況是指針接觸到右面的已選欄目里元件的范圍，這時(shí)相當(dāng)于確認(rèn)要把原來(lái)左邊移動(dòng)的選項(xiàng)移動(dòng)到右邊，所以我們就用添加行的交互，將中繼器1中當(dāng)前行的值添加到中繼器2里；然后再用刪除行事件，將中繼器1里面的當(dāng)前行刪除；最后就是重新啟用中繼器內(nèi)部的矩形，這樣相當(dāng)于回復(fù)默認(rèn)樣式。

第二種情況情況就是上面情況不存在，鼠標(biāo)指針沒(méi)有位于接觸到右面的已選欄目里元件的范圍，這是相當(dāng)于用戶(hù)放棄添加，或者移動(dòng)錯(cuò)了。這種情況我們就恢復(fù)原狀即可，首先是用移動(dòng)的交互，將動(dòng)態(tài)面板移動(dòng)回拖動(dòng)前的位置；然后重新啟用中繼器內(nèi)部的矩形，這樣相當(dāng)于回復(fù)默認(rèn)樣式。

3. 右側(cè)動(dòng)態(tài)面板的交互

右側(cè)動(dòng)態(tài)面板的交互其實(shí)和左側(cè)動(dòng)態(tài)面板的交互一致，只不過(guò)是對(duì)象不一樣。右邊的在拖動(dòng)結(jié)束的時(shí)候，是將中繼器2里面的值添加到中繼器1里，再刪除中繼器2當(dāng)前行。其余交互基本一致，對(duì)著照寫(xiě)就可以了。

這樣我們就制作完成了，以后我們需要使用的話，只需要在左側(cè)未選欄目的中繼器的表格里填寫(xiě)選項(xiàng)即可，自動(dòng)生成交互效果，是不是很方便呢？

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

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

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