本文將詳細介紹如何利用這種平臺創建具有高度交互性的頁面，包括添加、移動和刪除頁面元素等功能。讓我們一起探索這個簡化開發的新領域！

低代碼開發平臺通常提供拖拉拽編輯頁面的功能，使用戶無需編寫大量代碼即可創建復雜的應用程序和頁面。這種平臺的特點是通過圖形用戶界面來進行開發，用戶可以拖拽組件到畫布上進行布局和配置。

一、效果展示

• 拖動左側工具欄里的工具，可以在頁面中添加對應的圖表
• 添加后的圖表可以通過拖動的方式再次移動對應的位置
• 多余的圖片，可以通過鼠標移入后按鍵盤delete鍵刪除

原型地址：https://jmv7cw.axshare.com

二、制作教程

這個模板主要分成3部分內容，分別是左側工具欄，頁面展示區和添加彈窗

1. 左側工具欄

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

我們要將中繼器里的組合作為動態面板，因為只有動態面板才有拖動事件

中繼器外如果想固定在指定位置，可以轉為動態面板后固定在瀏覽器的指定位置，如果工具欄太長，也可以調出滾動條，通過雙動態面板的方式隱藏滾動條。

中繼器表格里共3列，pic列對應工具欄里的圖標；pic1列是該圖標對應的圖表素材；text列對應工具欄的文字。

我們導入對應素材和填寫內容后，如果是Axure10，我們直接點擊中繼器表格里的連接，就可以選擇將值設置到對應的元件，如果是Axure8、9，就要在中繼器每項加載時，用設置文本和設置圖片的交互，將值設置到文本標簽和圖片元件里

2. 頁面展示區

頁面展示區我們主要用到中繼器和圖片元件，將圖片元件放在中繼器內部，圖片大小根據實際需要設置，需要將圖片轉為動態面板，因為后面需要二次拖動編輯。

整個中繼器轉為動態面板，動態面板的范圍就相當于頁面展示區的范圍，有需要的我們可以在載入時根據頁面尺寸來設置大小。

中繼器表格包括以下幾列：pic列對應圖表的內容，x和y列對應圖表中心位置的橫縱坐標值

中繼器每項加載時，用移動事件，將圖片中心移動到x和y列對應的坐標中，這里要注意的是，因為在動態面板里，如果動態面板的位置在0.0，這個是不影響的，如果不是在0,0，就要減去對應的動態面板的x和y坐標值。舉一個例子來說明：如果動態面板的x坐標值為100，圖片元件在動態的坐標值為0，他在整個頁面里的坐標值就應該是0+100=100。另外一點需要注意的是，因為中繼器是一行行加載的，所以后面行的y值要減去前面行的高度。

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

鼠標單擊、移入、移動、停放在圖片動態面板時，我們要選中圖片，為后續的刪除圖片做準備，我們用標記行的事件標記當前行就可以了。但是，在標記之前，我們要先用取消標記的操作，取消之前的標記，這樣可以確保標記是唯一的。

在頁面按鍵按下時，如果按下的是delete鍵，我們就用刪除行的交互，刪除已標記的行。

鼠標移出圖片動態面板時，我們用取消標記所有標記的交互，取消即可

這樣就實現了，鼠標在哪張圖片上面，點擊delete鍵就可以將他刪除

鼠標拖動動態面板時，我們用移動的交互，選擇跟隨移動，在移動的過程中，可以能會被前面的內容遮擋，所以我們可以用置頂的交互，將他置頂。拖動結束時，我們要把圖片動態面板元件中心點坐標更新回中繼器表格里，因為如果不更新，下次添加或刪除時，就會觸發中繼器每項加載時，重新讀取中繼器每一行的內容，這樣之前移動的修改就會恢復原狀，所以這里我么能要更新行的交互，將圖片動態面板的中心坐標，保存到中繼器表格當前行的x和y列里。

這樣我們就完成了拖動修改位置的效果了。

3. 添加彈窗

添加彈窗就是一個默認隱藏的圖片元件，因為從左側工具欄拖動到頁面展示區，中間是沒有聯系的，所以我們要用一個圖片元件來過渡，這個圖片元件的尺寸，要和頁面展示區里中繼器里的圖片元件的尺寸一致。

在鼠標開始拖動工具欄中繼器里的動態面板時，我們用設置圖片的交互，將中繼器里當前行的pic1列的圖片值，設置到圖片彈窗里，然后用顯示的交互，顯示圖片彈窗，接著用移動事件，讓他的中心點移動到鼠標指針的位置，這里我們可以用cursor.x和cursor.y函數動態獲取鼠標指針的x和y坐標值。

拖動時也是用移動事件，和上面的移動事件一樣，這樣圖片彈窗就可以跟著鼠標移動了。

拖動結束的時候，我們需要進行條件判斷，圖片彈窗是否和頁面展示區的位置有重疊，如果有接觸重疊，就是要添加這個圖片，我們就用添加行的交互，將工具欄當前行的pic列的圖片值，添加到頁面展示區的中繼器里，對應的x和y坐標就是當前圖片彈窗中心點所在的x和y坐標值；如果沒有接觸，就不需要增加。最后我們用隱藏的交互，將彈窗隱藏即可。

這樣我們就完成拖拉拽動態編輯頁面原型模板了，后續使用也很方便，只需要在中繼器表格里填寫對應的信息導入對應的素材，預覽后即可自動生成對應的效果。

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