Axure设计之中继器表格——拖动列调整位置教程（中继器）

一、原理介绍

实现表格列的拖动排序，主要依赖Axure的动态面板和中继器两大核心功能：

1. 动态面板交互控制

   • 将表格的列标题封装在动态面板中，通过拖拽事件（开始、移动、结束）捕捉用户操作

   • 在拖拽过程中实时计算鼠标位置，动态调整列的位置视觉反馈

   • 记录原始列位置与目标位置的索引值

2. 中继器数据联动

   • 表格内容通过中继器动态生成，每个单元格与数据集的字段绑定

   • 当列顺序改变时，通过调整中继器项目的显示顺序实现内容同步更新

   • 利用中继器的「项目加载时」事件自动填充数据

3. 坐标定位机制

   • 通过比较鼠标移动的X轴坐标差，判断列应该向左或向右移动

   • 在拖拽结束时，根据最终位置重新排列所有列的显示顺序

二、示例预览

源文件已上传到优快云资源中心，需要可以直接下载源文件：中继器表格拖动列调