作為一名產(chǎn)品經(jīng)理，想長(zhǎng)久保有對(duì)產(chǎn)品設(shè)計(jì)熱情的秘訣之一，就是始終保持對(duì)一切新生事物的好奇心，并探索一切可能的未知，有時(shí)候不一定要追求有用，而是只要你覺得有趣。本篇，作者將用 Axure 來(lái)實(shí)現(xiàn)一個(gè)拖拽框選的效果，一起來(lái)看看吧。

先來(lái)看看我們今天要參照實(shí)現(xiàn)的效果：

這個(gè)我相信很多人都不會(huì)覺得陌生，這是 Windows 中鼠標(biāo)拖拽框選的效果，一般用于選取多個(gè)文件或文件夾，在 Axure 中也有這種框選操作：

這種設(shè)計(jì)多用于客戶端或一些設(shè)計(jì)類的工具軟件中，今天我打算用 Axure 來(lái)實(shí)現(xiàn)這個(gè)拖拽框選的效果。

先來(lái)看看最終效果（體驗(yàn)傳送門>>）：

我也經(jīng)常問自己，為什么要做這種既無(wú)聊又無(wú)用的設(shè)計(jì)，這種設(shè)計(jì)在實(shí)際業(yè)務(wù)中會(huì)用到的幾率不到 0.01%，我經(jīng)常調(diào)侃自己說(shuō)是“不務(wù)正業(yè)”，但是我始終相信，作為一名產(chǎn)品經(jīng)理，想長(zhǎng)久保有對(duì)產(chǎn)品設(shè)計(jì)熱情的秘訣之一，就是始終保持對(duì)一切新生事物的好奇心，并探索一切可能的未知，有時(shí)候不一定要追求有用，而是只要你覺得有趣，那就夠了！

我好像扯遠(yuǎn)了，接下來(lái)開始動(dòng)手實(shí)現(xiàn)吧。

首先我們來(lái)分析一下框選的動(dòng)作：

1. 鼠標(biāo)按住并拖拽時(shí)，拉出框選區(qū)域；
2. 框選區(qū)域以鼠標(biāo)點(diǎn)擊位置作為原點(diǎn)，鼠標(biāo)移動(dòng)時(shí)，根據(jù)鼠標(biāo)位置動(dòng)態(tài)調(diào)整框選區(qū)域大??；
3. 松開鼠標(biāo)時(shí)，隱藏框選區(qū)域。

一、外觀

首先，我們需要繪制一個(gè)矩形作為【舞臺(tái)】，因?yàn)樵陧?yè)面上直接操作的話，Axure 提供的交互很少，有很多交互做不了：

所以我們新建一個(gè)矩形作為【舞臺(tái)】，在【舞臺(tái)】做操作，能用到的交互就多了很多：

【舞臺(tái)】效果：

鼠標(biāo)拖拽時(shí)拉出的框選區(qū)域也是一個(gè)矩形，我們?cè)偬砑右粋€(gè)矩形并設(shè)置好樣式，命名為【框選區(qū)域】，由于我們是需要它在鼠標(biāo)拖拽時(shí)才出現(xiàn)，所以默認(rèn)我們給它【隱藏】：

二、交互

接下來(lái)我們開始設(shè)置交互，首先我們的【舞臺(tái)】在 Axure 是固定大小的，但是在預(yù)覽的時(shí)候，我們希望它能根據(jù)窗口自動(dòng)調(diào)整大小，所以這里給它添加了一個(gè)【載入時(shí)】【設(shè)置尺寸】的事件，讓它根據(jù)瀏覽器窗口大小調(diào)整自身大?。?/p>

這樣我們?cè)跒g覽器中瀏覽時(shí)，【舞臺(tái)】就會(huì)自動(dòng)全屏了：

接下來(lái)給舞臺(tái)添加【鼠標(biāo)按下時(shí)】的事件：

主要做3件事：

1. 將【框選區(qū)域】的尺寸設(shè)為0*0，這樣框選區(qū)域就等于只有一個(gè)看不見的點(diǎn)；
2. 把【框選區(qū)域】移動(dòng)到鼠標(biāo)當(dāng)前所在位置；
3. 把【框選區(qū)域】顯示出來(lái)，但此時(shí)是看不到任何東西的。

此時(shí)如果我們松開了鼠標(biāo)，則將【框選區(qū)域】隱藏掉：

接下來(lái)就是這個(gè)交互的重點(diǎn)，當(dāng)【鼠標(biāo)移動(dòng)時(shí)】，根據(jù)鼠標(biāo)位置來(lái)調(diào)整【框選區(qū)域】大?。?/p>

這里涉及到【框選區(qū)域】的尺寸計(jì)算，我們一般都是習(xí)慣自左上向右下拖動(dòng)，此時(shí)【框選區(qū)域】的寬度就是鼠標(biāo)所在的 x 值減去【框選區(qū)域】的 x 值，高度則是鼠標(biāo)所在 y 值減去【框選區(qū)域】 y 值，我們來(lái)看看效果：

整體效果出來(lái)了，但是有點(diǎn)卡頓，有時(shí)候還不一定能成功，這里我就只能憑經(jīng)驗(yàn)解決了，當(dāng)鼠標(biāo)在【舞臺(tái)】移動(dòng)時(shí)，雖然【框選區(qū)域】沒有顯示出來(lái)，但是依然會(huì)執(zhí)行動(dòng)作，會(huì)消耗一定資源，所以這里我給【鼠標(biāo)移動(dòng)時(shí)】的事件加了一個(gè)條件，就是只有【框選區(qū)域】顯示出來(lái)時(shí)才執(zhí)行動(dòng)作：

由于我的錄屏軟件一開又會(huì)出現(xiàn)卡頓的現(xiàn)象，這里我就不放調(diào)整后的效果圖了，各位可自行體驗(yàn)。

這里還有問題，就是從左上向右下拉的時(shí)候，框選區(qū)域是正常的，但是如果發(fā)現(xiàn)區(qū)域拉大了，從右下向左上移動(dòng)，【框選區(qū)域】卻不會(huì)縮小，如下：

這個(gè)是因?yàn)槲覀兪鞘髽?biāo)先動(dòng)，區(qū)域跟著調(diào)整，從右下往左上移動(dòng)的時(shí)候，鼠標(biāo)被【框選區(qū)域】擋住了，因此【舞臺(tái)】無(wú)法檢測(cè)鼠標(biāo)的移動(dòng)，所以這個(gè)時(shí)候應(yīng)該給【框選區(qū)域】也加上【鼠標(biāo)移動(dòng)時(shí)】調(diào)整【框選區(qū)域】尺寸的事件：

看看效果：

好了，分享就到這里，感謝閱讀！