要在Axure中实现图标拖动交换位置的功能,可以通过动态面板结合交互事件来实现。
实现步骤
- 准备图标元素
- 将每个图标转换为动态面板(方便拖动和交互)。
- 设置拖动交互
- 选中图标动态面板 → 添加“拖动时”交互 → 选择“移动”当前动态面板(跟随鼠标拖动)。
- 实现交换位置逻辑
- 添加“拖动结束时”交互:
- 判断是否与其他图标重叠(Axure 的“重叠”条件)。
- 如果重叠,交换两个图标的位置(通过“移动”动作调整坐标)。
- 添加“拖动结束时”交互:
- 复制交互到其他图标
- 将交互逻辑复制到其他图标动态面板,调整目标对象。
关键点
- 动态面板:所有可拖动图标必须独立为动态面板。
- 重叠检测:用“拖动结束时”的条件判断是否重叠。
- 位置交换:通过“移动”动作更新图标坐标实现交换。
作品预览-Web端高保真动态交互元件库-EQL UI