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

先來看看我們今天要參照實現的效果：

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

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

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

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

我好像扯遠了，接下來開始動手實現吧。

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

1. 鼠標按住并拖拽時，拉出框選區域；
2. 框選區域以鼠標點擊位置作為原點，鼠標移動時，根據鼠標位置動態調整框選區域大??；
3. 松開鼠標時，隱藏框選區域。

一、外觀

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

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

【舞臺】效果：

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

二、交互

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

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

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

主要做3件事：

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

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

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

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

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

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

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

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

看看效果：

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