拖拽框選在網(wǎng)頁設(shè)計和開發(fā)中非常實用，在各種應(yīng)用場景中都有著廣泛的應(yīng)用。本文作者分享了如何在Axure內(nèi)實現(xiàn)任意方向鼠標(biāo)拖拽框選的效果，一起來看一下吧。

拖拽框選是現(xiàn)代應(yīng)用程序中經(jīng)常使用的功能之一，比如原型制作時常見的實際應(yīng)用：

• 圖片框選：拖拽框選可以用于網(wǎng)頁中的圖片操作，用戶可以通過鼠標(biāo)拖動實現(xiàn)對圖片的裁剪或者放大。
• 表格選擇：當(dāng)需要對中繼器中的表格進(jìn)行操作時，通過拖拽框選可以快速地選擇多行或多列，甚至進(jìn)行一定程度的計算。
• 畫板應(yīng)用：拖拽框選可以用于在線畫板應(yīng)用，用戶可以通過鼠標(biāo)拖動繪制出一個矩形。
• 地圖選擇：在網(wǎng)頁中的地圖應(yīng)用中，用戶可以使用拖拽框選來選擇一個區(qū)域，以查看該區(qū)域的詳細(xì)信息或執(zhí)行其他操作。

總之，拖拽框選在網(wǎng)頁設(shè)計和開發(fā)中非常實用，在各種應(yīng)用場景中都有著廣泛的應(yīng)用。它可以提高用戶體驗、方便用戶的操作、簡化操作流程，同時也可以增強(qiáng)原型的交互性和可用性，是實現(xiàn)各種應(yīng)用程序的重要功能之一。

一、演示

先來看下演示吧：

二、分析

在電腦上，拖拽選取操作是通過鼠標(biāo)來捕捉用戶的手勢，在拖拽操作中，用戶首先點(diǎn)擊并按住鼠標(biāo)左鍵，然后移動鼠標(biāo)，直到所需選取的區(qū)域被框選完成，最后松開鼠標(biāo)左鍵或手指即可完成選取操作。

那么這個矩形區(qū)域應(yīng)該是由用戶開始點(diǎn)擊的點(diǎn)和結(jié)束拖拽的點(diǎn)所構(gòu)成的矩形，這樣我們就知道了，這個矩形的寬度應(yīng)該為鼠標(biāo)橫向移動距離，高度應(yīng)該為縱向移動距離。

但是用戶不可能總是從左上向右下選取，那么我們需要分別分析，雖然頁面里縱坐標(biāo)向下為正，但我們用數(shù)學(xué)上的象限進(jìn)行分類：

• 先分析上圖，當(dāng)框選矩形位于第四象限時，矩形的左上角就起始點(diǎn)(x:0, y:0)。
• 當(dāng)矩形位于第一象限時，矩形的左上角應(yīng)該向上移一個矩形的高度(x:0, y:-height)。
• 當(dāng)矩形位于第三象限時，矩形應(yīng)該向左移一個矩形的寬度(x:-width, y:0)。
• 最麻煩是當(dāng)矩形位于第二象限時，應(yīng)該同時向上移一個矩形的高度，并且向左移一個矩形的寬度(x:-width, y:-height)。

三、教程

思路已經(jīng)理清楚，我們可以動手做原型了。

先建兩個全局變量，叫dragStartX和dragStartY，用來記錄鼠標(biāo)按下時的坐標(biāo)。

放一個顯示用的矩形，寬度高度必須大于2×2，邊框的顏色重一些，填充的顏色淺一些，并且透明度50%，依個人喜好配置就行，默認(rèn)調(diào)色板的第2行和第4行就挺好。配置好后將矩形設(shè)為隱藏。

建兩個交互，一個是“旋轉(zhuǎn)時”可以在鼠標(biāo)按下時進(jìn)行一些初始化設(shè)置。

一個是“尺寸改變時”用來自動更新矩形的左上角的坐標(biāo)，前面分析過了，可以用四個If/Else分別判斷四個象限。

會用Axure函數(shù)的這里也可以用Math.min進(jìn)行優(yōu)化，注：下圖功能同上圖，選其一即可。

在矩形上點(diǎn)右鍵“轉(zhuǎn)換為動態(tài)面板”，先建一個“加載時”交互，讓動態(tài)面板的寬度更改為[[Window.Width]]高度更改為[[Window. Height]]。這樣可操作的區(qū)域就比較大了。

建一個“拖動開始時”交互，去觸發(fā)矩形的“旋轉(zhuǎn)時”。

再建一個“拖動時”交互，實時更改矩形的尺寸為[[Math.abs(TotalDragX)]]和[[Math.abs(TotalDragY)]]， 因為我們已經(jīng)設(shè)置過矩形的“尺寸改變時”所以這里就無需考慮它的移動了，最后建一個“拖動結(jié)束時”交互，這里可以根據(jù)自身需要讓矩形保留或隱藏（測試看效果時推薦保留顯示）。

好了，一個可以任意方向托拽的框選功能就做好了?？纯葱Ч?/p>

實踐應(yīng)用

我在 《Axure中繼器全選操作的“半選中狀態(tài)”及框選》 文章里介紹了一個框選效果的基本應(yīng)用，詳見：

http://m.22none.com/rp/5826959.html

最后

有進(jìn)一步興趣的還可以再加入其他的交互功能，比如“按住Shift鍵”進(jìn)行增選功能等。會元件“接觸”判斷的朋友，就可以實現(xiàn)中繼器的多選、數(shù)據(jù)統(tǒng)計等操作。