要在Axure中實現圖標拖動交換位置的功能,可以通過動態面板結合交互事件來實現。
實現步驟
- 準備圖標元素
- 將每個圖標轉換為動態面板(方便拖動和交互)。
- 設置拖動交互
- 選中圖標動態面板 → 添加“拖動時”交互 → 選擇“移動”當前動態面板(跟隨鼠標拖動)。
- 實現交換位置邏輯
- 添加“拖動結束時”交互:
- 判斷是否與其他圖標重疊(Axure 的“重疊”條件)。
- 如果重疊,交換兩個圖標的位置(通過“移動”動作調整坐標)。
- 添加“拖動結束時”交互:
- 復制交互到其他圖標
- 將交互邏輯復制到其他圖標動態面板,調整目標對象。
關鍵點
- 動態面板:所有可拖動圖標必須獨立為動態面板。
- 重疊檢測:用“拖動結束時”的條件判斷是否重疊。
- 位置交換:通過“移動”動作更新圖標坐標實現交換。
作品預覽-Web端高保真動態交互元件庫-EQL UI