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

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

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

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

一、效果展示

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

原型地址：https://yu1cwx.axshare.com/#g=1&p=拖動(dòng)穿梭選擇器

二、制作教程

1. 材料準(zhǔn)備

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

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

提示圖文，我們用插畫+文字組成組合，如果默認(rèn)沒(méi)有選項(xiàng)就顯示，如果有選項(xiàng)就默認(rèn)隱藏；如下圖所示擺放：

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

因?yàn)樾枰蟿?dòng)，所以我們要將這個(gè)兩個(gè)元件轉(zhuǎn)為動(dòng)態(tài)面板；

中繼器表格里，默認(rèn)一列，里面填寫默認(rèn)選項(xiàng)的信息

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

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

2. 交互制作

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

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

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

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

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

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

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

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

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