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

編輯導讀：隨著系統的升級，用戶的操作習慣的發生了改變，從以往的點點點，到現在的拖拉拽。拖動、滑動的操作在軟件操作里越來越常見。本文作者分享了如何用Axure制作拖動選擇器，希望對你有幫助。

隨著系統的升級，用戶的操作習慣的發生了改變，從以往的點點點，到現在的拖拉拽。拖動、滑動的操作在軟件操作里越來越常見。所以今天作者就教大家在Axure里如果使用中繼器以及動態面板，來做一個拖動選擇的穿梭選擇器。

原型預覽地址：https://xqvfpk.axshare.com/#g=1

一、材料準備

選擇器分為可選欄目和已選欄目，兩邊的選擇器里面的元件都是一樣的，所以我們就以左側可選欄目選擇器展開說明。

具體材料包括：中繼器、背景外框

1、中繼器：內部自帶的矩形轉為動態面板，因為在axure里面只有動態面板可以拖動，然后樣色需要設置成無邊框線，選中顏色為灰色，禁用顏色為藍色。

中繼器表格內在默認列Column0填入選項即可，如下圖所示

2、背景外框：用矩形制作，設置邊框顏色，置于中繼器選項下方即可。

二、交互制作

中繼器每項加載時時，設置中繼器內部自帶矩形的文本值為item.Column0，即中繼器內Column0列的值，這個交互是默認存在的，如果我們沒有改過就不用變。

中繼器載入時，這里如果我們想固定選項的排序，那我們可以增加排序事件，如果不需要固定排序的話就可以不用增加

鼠標移入動態面板時，我們用設置選中的交互選中中繼器內部矩形，鼠標移出動態面板時，我們用設置選中的交互取消選中中繼器內部的矩形。這樣做是讓各個選項有一個移入變色的效果，因為之前我們設置矩形選中樣色是填充顏色為灰色，所以移入就會變灰色。那這里為什么不用鼠標懸停時的交互呢，那是因為中繼器的bug，后續拖動選項后，雖然鼠標移出了區域，但是中繼器還會以為鼠標停留在原來的地方，導致自動讓下一個選項變色。所以我們就不用鼠標懸停的交互樣式。

鼠標拖動動態面板時，我要用移動事件，移動該動態面板跟誰水表在x軸方向移動，并且用置頂的組合將該組合置頂，如果不置頂的話，移動的過程中就有可能被其他元件遮擋。然后我們還要禁用中繼器內部的矩形，前面我們設置了禁用矩形的樣式為藍色，這樣做的原因就是為了有一個變色的效果。

完成到這一步，我們就可以復制整個組合，然后在右邊粘貼一個作為已選欄目的選擇器組合。

繼續回到左邊選擇器的交互，鼠標拖動動態面板結束時，我們分兩種情況來討論

第一種是，鼠標指針接觸到右邊已選欄目的組合，這代表想將該選項移到右邊的選擇器中，所以我們要執行以下交互：

1、在右面的中繼器里添加行，添加的內容為當前選擇器移動的內容，可以用變量選擇中繼器內容的文本，或者直接用中繼器表格中的item.column0都可以。

2、在左邊的中繼器，即當前中繼器中刪除行，刪除當前行，即移動過去的選項。

3、啟用中繼器內部矩形，因為前面移動的過程中禁用了，所以我們這里用啟用的交互將矩形重新啟用。

第二種情況：鼠標指針沒有解除到右邊已選欄目的組合是，這代表用戶移錯了，并不是想移動該項到右邊，name我們就執行以下交互：

1、用移動事件將動態面板移動回原來的位置。

2、啟用中繼器內部矩形，因為前面移動的過程中禁用了，所以我們這里用啟用的交互將矩形重新啟用。

這樣我們就完成了左邊可選欄目的交互了，右邊已選欄目的交互和左邊的交互思路都是一致的，只是指針判斷的接觸范圍從右邊的選擇器改為左邊的選擇器，添加行變成是在左邊選擇器添加，右邊選擇器中刪除。

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

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

本文由 @做產品但不是經理 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議