中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

那下面我們一起開始制作吧。

一、材料準(zhǔn)備

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、交互制作

1. 中繼器的交互

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

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

中繼器載入時：這里因為我想選項保持一個順序，所以我添加一個排序的交互，非必要，你們可以看情況增加。

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

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

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

鼠標(biāo)拖動時：用移動事件，將動態(tài)面板沿水平方向跟著鼠標(biāo)拖動，將左邊欄目整個組合置頂，不如不置頂?shù)脑挘蜁挥疫呉堰x欄目的元件遮擋住。最后我們還要禁用矩形元件，因為前面我們設(shè)置了禁用顏色為藍色，這樣做的目的也是拖動時有一個變色的效果。

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

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

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

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

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

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

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

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

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