Axure教程:拖拉拽編輯頁面

1 評論 4242 瀏覽 5 收藏 10 分鐘

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

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

一、效果展示

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

二、制作教程

這個模板主要分成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坐標值;如果沒有接觸,就不需要增加。最后我們用隱藏的交互,將彈窗隱藏即可。

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

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

本文由 @AI產品人 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 先收藏,等畢業準備找工作再拿出來看。

    來自廣東 回復