拖拉拽是設(shè)計軟件里常用的操作方式，本文作者分享了在Axure中制作一個能夠拖拉拽隨意放大縮小，或者移動元件的原型模板的教程，一起來學習一下吧。

拖拉拽是設(shè)計軟件里常用的操作方式，所以今天作者就教大家在Axure中，如何制作一個能夠拖拉拽隨意放大縮小或者移動元件的原型模板。

一、效果展示

1、鼠標拖動元件的四個角，從而放大或者縮小目標元件；

2、鼠標拖動目標元件，可以移動元件位置。

二、制作材料

1. 被拖動的對象

我們以拖動放大縮小地圖為案例，所以我們需要準備一個北京地圖的素材，我們可以用形狀畫出北京市下各區(qū)的地圖，如果有地圖素材的話，也可以直接導入svg素材，右鍵轉(zhuǎn)為形狀，再給對應(yīng)區(qū)域添加填充顏色。

2. 動態(tài)面板

我們要在元件組上方添加一個動態(tài)面板，因為只有動態(tài)面板有拖動時這個交互，動態(tài)面板的大小覆蓋下面地圖的元件組即可。

3. 拖動控制大小的四個角

我們用矩形來制作就可以了，我們以右下角為例，我們增加一個正方形的矩形，默認值顯示右方和下方的邊線，如下圖所示

左上、右上和左下也是一樣的，分別顯示左上、右上和左下的邊線。完成后將4個矩形分別放置在4個角的位置，4個矩形都要轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板有拖動的交互，默認隱藏。

二、交互制作

1. 鼠標移入出組合時

我們先把所有元件組合在一起，鼠標移入組合時，我們就顯示4個角的矩形，鼠標移出組合時，我們就隱藏4個角的矩形。

2. 鼠標拖動4個角的矩形

這里我們以右下角為例，其余的3個角同理。

鼠標拖動右下角時，其實我們就是要把動態(tài)面板和下面的目標元件放大或者縮小，我們用設(shè)置尺寸的交互就可以實現(xiàn)了，那么如何確定尺寸呢？我們可以通過左上角的坐標，以及右下角的坐標計算得出，其實寬度就是右下角x坐標值-左上角x坐標值，高度就等于左上角x坐標值-右上角x坐標值，這樣尺寸就出來了。

這里我們還需要考慮右下角x坐標值-左上角x坐標值和左上角x坐標值-右上角x坐標值必須是一個正數(shù)，因為沒有尺寸是小于0的。所以我們在移動時要給增加一個邊界，右下角左側(cè)不能小于左上角的右側(cè)，右下角的上方，不能小于左上角的底部。

尺寸設(shè)置完之后，我們還需要考慮4個角具體的位置，左上和右下是不用管他的，因為拖動右下角的話，左上角是不變的，右下角自然就會到達拖動的位置。那現(xiàn)在要改變的就是左下角和右上角的坐標。我們用移動事件將他們移動到對應(yīng)位置就好了。

那到底要移動到哪里合適呢？我們先看左下角，左下角的話，其實x坐標是不變的，變得只有y坐標，因為要跟右下角的高度一致，所以y坐標就等于右下角的y坐標值。

右上角也是同樣道理，他是高度不變，就是y坐標值不變，變得只是左右的位置，這個位置和右下角的位置是一樣的，所以就是右下角的x坐標值。

這樣我們就完成了右下角拖動放大縮小的交互了，其他三個角的原理也是一樣，大家可以自行完成。

3. 鼠標拖動動態(tài)面板的交互

鼠標拖動動態(tài)面板時，我們只需要用移動的交互，將整個組合跟隨鼠標移動即可。

這樣我們就制作完成了拖拉拽放大縮小和移動元件的原型模板了。

那以上就是本期教程的全部內(nèi)容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。