本文將詳細(xì)介紹如何利用這種平臺(tái)創(chuàng)建具有高度交互性的頁面，包括添加、移動(dòng)和刪除頁面元素等功能。讓我們一起探索這個(gè)簡化開發(fā)的新領(lǐng)域！

低代碼開發(fā)平臺(tái)通常提供拖拉拽編輯頁面的功能，使用戶無需編寫大量代碼即可創(chuàng)建復(fù)雜的應(yīng)用程序和頁面。這種平臺(tái)的特點(diǎn)是通過圖形用戶界面來進(jìn)行開發(fā)，用戶可以拖拽組件到畫布上進(jìn)行布局和配置。

一、效果展示

• 拖動(dòng)左側(cè)工具欄里的工具，可以在頁面中添加對(duì)應(yīng)的圖表
• 添加后的圖表可以通過拖動(dòng)的方式再次移動(dòng)對(duì)應(yīng)的位置
• 多余的圖片，可以通過鼠標(biāo)移入后按鍵盤delete鍵刪除

二、制作教程

這個(gè)模板主要分成3部分內(nèi)容，分別是左側(cè)工具欄，頁面展示區(qū)和添加彈窗

1. 左側(cè)工具欄

主要材料包括中繼器、圖片和文本標(biāo)簽，中繼器里元件如下圖所示擺放：

我們要將中繼器里的組合作為動(dòng)態(tài)面板，因?yàn)橹挥袆?dòng)態(tài)面板才有拖動(dòng)事件

中繼器外如果想固定在指定位置，可以轉(zhuǎn)為動(dòng)態(tài)面板后固定在瀏覽器的指定位置，如果工具欄太長，也可以調(diào)出滾動(dòng)條，通過雙動(dòng)態(tài)面板的方式隱藏滾動(dòng)條。

中繼器表格里共3列，pic列對(duì)應(yīng)工具欄里的圖標(biāo)；pic1列是該圖標(biāo)對(duì)應(yīng)的圖表素材；text列對(duì)應(yīng)工具欄的文字。

我們導(dǎo)入對(duì)應(yīng)素材和填寫內(nèi)容后，如果是Axure10，我們直接點(diǎn)擊中繼器表格里的連接，就可以選擇將值設(shè)置到對(duì)應(yīng)的元件，如果是Axure8、9，就要在中繼器每項(xiàng)加載時(shí)，用設(shè)置文本和設(shè)置圖片的交互，將值設(shè)置到文本標(biāo)簽和圖片元件里

2. 頁面展示區(qū)

頁面展示區(qū)我們主要用到中繼器和圖片元件，將圖片元件放在中繼器內(nèi)部，圖片大小根據(jù)實(shí)際需要設(shè)置，需要將圖片轉(zhuǎn)為動(dòng)態(tài)面板，因?yàn)楹竺嫘枰瓮蟿?dòng)編輯。

整個(gè)中繼器轉(zhuǎn)為動(dòng)態(tài)面板，動(dòng)態(tài)面板的范圍就相當(dāng)于頁面展示區(qū)的范圍，有需要的我們可以在載入時(shí)根據(jù)頁面尺寸來設(shè)置大小。

中繼器表格包括以下幾列：pic列對(duì)應(yīng)圖表的內(nèi)容，x和y列對(duì)應(yīng)圖表中心位置的橫縱坐標(biāo)值

中繼器每項(xiàng)加載時(shí)，用移動(dòng)事件，將圖片中心移動(dòng)到x和y列對(duì)應(yīng)的坐標(biāo)中，這里要注意的是，因?yàn)樵趧?dòng)態(tài)面板里，如果動(dòng)態(tài)面板的位置在0.0，這個(gè)是不影響的，如果不是在0,0，就要減去對(duì)應(yīng)的動(dòng)態(tài)面板的x和y坐標(biāo)值。舉一個(gè)例子來說明：如果動(dòng)態(tài)面板的x坐標(biāo)值為100，圖片元件在動(dòng)態(tài)的坐標(biāo)值為0，他在整個(gè)頁面里的坐標(biāo)值就應(yīng)該是0+100=100。另外一點(diǎn)需要注意的是，因?yàn)橹欣^器是一行行加載的，所以后面行的y值要減去前面行的高度。

然后用設(shè)置圖片的交互，將pic列的值設(shè)置到圖片元件里

鼠標(biāo)單擊、移入、移動(dòng)、停放在圖片動(dòng)態(tài)面板時(shí)，我們要選中圖片，為后續(xù)的刪除圖片做準(zhǔn)備，我們用標(biāo)記行的事件標(biāo)記當(dāng)前行就可以了。但是，在標(biāo)記之前，我們要先用取消標(biāo)記的操作，取消之前的標(biāo)記，這樣可以確保標(biāo)記是唯一的。

在頁面按鍵按下時(shí)，如果按下的是delete鍵，我們就用刪除行的交互，刪除已標(biāo)記的行。

鼠標(biāo)移出圖片動(dòng)態(tài)面板時(shí)，我們用取消標(biāo)記所有標(biāo)記的交互，取消即可

這樣就實(shí)現(xiàn)了，鼠標(biāo)在哪張圖片上面，點(diǎn)擊delete鍵就可以將他刪除

鼠標(biāo)拖動(dòng)動(dòng)態(tài)面板時(shí)，我們用移動(dòng)的交互，選擇跟隨移動(dòng)，在移動(dòng)的過程中，可以能會(huì)被前面的內(nèi)容遮擋，所以我們可以用置頂?shù)慕换?，將他置頂。拖?dòng)結(jié)束時(shí)，我們要把圖片動(dòng)態(tài)面板元件中心點(diǎn)坐標(biāo)更新回中繼器表格里，因?yàn)槿绻桓?，下次添加或刪除時(shí)，就會(huì)觸發(fā)中繼器每項(xiàng)加載時(shí)，重新讀取中繼器每一行的內(nèi)容，這樣之前移動(dòng)的修改就會(huì)恢復(fù)原狀，所以這里我么能要更新行的交互，將圖片動(dòng)態(tài)面板的中心坐標(biāo)，保存到中繼器表格當(dāng)前行的x和y列里。

這樣我們就完成了拖動(dòng)修改位置的效果了。

3. 添加彈窗

添加彈窗就是一個(gè)默認(rèn)隱藏的圖片元件，因?yàn)閺淖髠?cè)工具欄拖動(dòng)到頁面展示區(qū)，中間是沒有聯(lián)系的，所以我們要用一個(gè)圖片元件來過渡，這個(gè)圖片元件的尺寸，要和頁面展示區(qū)里中繼器里的圖片元件的尺寸一致。

在鼠標(biāo)開始拖動(dòng)工具欄中繼器里的動(dòng)態(tài)面板時(shí)，我們用設(shè)置圖片的交互，將中繼器里當(dāng)前行的pic1列的圖片值，設(shè)置到圖片彈窗里，然后用顯示的交互，顯示圖片彈窗，接著用移動(dòng)事件，讓他的中心點(diǎn)移動(dòng)到鼠標(biāo)指針的位置，這里我們可以用cursor.x和cursor.y函數(shù)動(dòng)態(tài)獲取鼠標(biāo)指針的x和y坐標(biāo)值。

拖動(dòng)時(shí)也是用移動(dòng)事件，和上面的移動(dòng)事件一樣，這樣圖片彈窗就可以跟著鼠標(biāo)移動(dòng)了。

拖動(dòng)結(jié)束的時(shí)候，我們需要進(jìn)行條件判斷，圖片彈窗是否和頁面展示區(qū)的位置有重疊，如果有接觸重疊，就是要添加這個(gè)圖片，我們就用添加行的交互，將工具欄當(dāng)前行的pic列的圖片值，添加到頁面展示區(qū)的中繼器里，對(duì)應(yīng)的x和y坐標(biāo)就是當(dāng)前圖片彈窗中心點(diǎn)所在的x和y坐標(biāo)值；如果沒有接觸，就不需要增加。最后我們用隱藏的交互，將彈窗隱藏即可。

這樣我們就完成拖拉拽動(dòng)態(tài)編輯頁面原型模板了，后續(xù)使用也很方便，只需要在中繼器表格里填寫對(duì)應(yīng)的信息導(dǎo)入對(duì)應(yīng)的素材，預(yù)覽后即可自動(dòng)生成對(duì)應(yīng)的效果。

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