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

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

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

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

一、演示

先來(lái)看下演示吧：

二、分析

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

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

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

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

三、教程

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

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

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

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

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

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

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

建一個(gè)“拖動(dòng)開(kāi)始時(shí)”交互，去觸發(fā)矩形的“旋轉(zhuǎn)時(shí)”。

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

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

實(shí)踐應(yīng)用

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

http://m.codemsi.com/rp/5826959.html

最后

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