跟技術(shù)撕逼一個效果，花費大量時間也無法交流出來，干脆動手做一個算了，有圖說明一切，同時分享給各位產(chǎn)品經(jīng)理，先看看效果。大神勿噴

效果很簡單

軟件版本

axure 8.0.0.3308

制作思路

監(jiān)測所選中并移動的動態(tài)面板，獲取它的位置并記錄它，當(dāng)停止移動后做判斷，每個動態(tài)面板加上模塊重疊判斷條件，符合條件將接觸元件移動到選中的動態(tài)面板位置，同時將選中的元件移動到新位置。

制作功能原型步驟&方法

第一步，設(shè)計草圖

利用元件工具，畫4個圖形，在面板上完成4個圖像的制作。

第二步：動態(tài)面板命名

逐個將圖形轉(zhuǎn)成動態(tài)面板，并從上至下逐個命名“1yuan”、“2yuan”“3yuan”“4yuan”

第三步：數(shù)據(jù)初始化（重點）

點擊工作面板任意位置，選擇“頁面載入時”，新建4個“變量”，我這里命名為“Y_1_zhi”、“Y_2_zhi”、“Y_3_zhi”、“Y_4_zhi”

將動態(tài)面板“1yuan”的Y坐標(biāo)賦予變量“Y_1_zhi”，同理：

• 動態(tài)面板“2yuan”的Y坐標(biāo)賦予變量“Y_2_zhi”
• 動態(tài)面板“3yuan”的Y坐標(biāo)賦予變量“Y_3_zhi”
• 動態(tài)面板“4yuan”的Y坐標(biāo)賦予變量“Y_4_zhi”

再新建一個變量，將動態(tài)面板“1yuan”的X坐標(biāo)賦予變量“X_t”（注意是“X坐標(biāo)”）。

學(xué)到這里如果不明白啥是變量或者賦值，請直接下載源文件吧，估計下面的教程也看不懂

第四步：移動判斷（核心）

選擇名字為“1yuan”的“動態(tài)面板“

添加“拖動開始時”事件，將動態(tài)面板“1yuan”當(dāng)前的Y坐標(biāo)賦予變量“Y_1_zhi”

添加“拖動時”事件，限制只能垂直拖動，并在移動時候，處于置頂狀態(tài)

添加“拖動結(jié)束時”事件，添加判斷“動態(tài)面板1接觸到動態(tài)面板2”的條件。

“1yuan”的位置移動到“2yuan”的“Y坐標(biāo)”， X坐標(biāo)使用前面初始化的

“2yuan”的位置移動到“1yuan”的“Y坐標(biāo)”， X坐標(biāo)使用前面初始化的

最后將“2yuan”的當(dāng)前Y坐標(biāo)賦予變量“Y_2_zhi”。

現(xiàn)在我們“F5”預(yù)覽一下，移動“元件模塊_1”到“元件模塊_2”的地方，發(fā)現(xiàn)它們已經(jīng)實現(xiàn)換位置了。恭喜成功?。?/p>

教程到此結(jié)束，接下來需要同樣的方法完成剩下的元件即可。

大神請繞過，勿噴我這小兒科的東西。

源文件下載

鏈接:? https://pan.baidu.com/s/1htZ7lXi? 密碼: cyiu

本文由 @仁德 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來源于網(wǎng)絡(luò)