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

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

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

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

先來看看最終效果（體驗傳送門>>）：

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

我好像扯遠了，接下來開始動手實現(xiàn)吧。

首先我們來分析一下框選的動作：

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

一、外觀

首先，我們需要繪制一個矩形作為【舞臺】，因為在頁面上直接操作的話，Axure 提供的交互很少，有很多交互做不了：

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

【舞臺】效果：

鼠標拖拽時拉出的框選區(qū)域也是一個矩形，我們再添加一個矩形并設(shè)置好樣式，命名為【框選區(qū)域】，由于我們是需要它在鼠標拖拽時才出現(xiàn)，所以默認我們給它【隱藏】：

二、交互

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

這樣我們在瀏覽器中瀏覽時，【舞臺】就會自動全屏了：

接下來給舞臺添加【鼠標按下時】的事件：

主要做3件事：

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

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

接下來就是這個交互的重點，當【鼠標移動時】，根據(jù)鼠標位置來調(diào)整【框選區(qū)域】大?。?/p>

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

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

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

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

這個是因為我們是鼠標先動，區(qū)域跟著調(diào)整，從右下往左上移動的時候，鼠標被【框選區(qū)域】擋住了，因此【舞臺】無法檢測鼠標的移動，所以這個時候應該給【框選區(qū)域】也加上【鼠標移動時】調(diào)整【框選區(qū)域】尺寸的事件：

看看效果：

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