一、原理介紹
實現表格列的拖動排序，主要依賴Axure的動態面板和中繼器兩大核心功能：
-
動態面板交互控制
-
將表格的列標題封裝在動態面板中，通過拖拽事件（開始、移動、結束）捕捉用戶操作
-
在拖拽過程中實時計算鼠標位置，動態調整列的位置視覺反饋
-
記錄原始列位置與目標位置的索引值
-
-
中繼器數據聯動
-
表格內容通過中繼器動態生成，每個單元格與數據集的字段綁定
-
當列順序改變時，通過調整中繼器項目的顯示順序實現內容同步更新
-
利用中繼器的「項目加載時」事件自動填充數據
-
-
坐標定位機制
-
通過比較鼠標移動的X軸坐標差，判斷列應該向左或向右移動
-
在拖拽結束時，根據最終位置重新排列所有列的顯示順序
-
二、示例預覽
源文件已上傳到CSDN資源中心，需要可以直接下載源文件：中繼器表格拖動列調整位置案例
三、材料準備
- 矩形元件：用于構建表格的表頭和行內容。
- 中繼器：用于生成表格內容。
- 動態面板：只有動態面板才能實現拖動效果，因此需要將中繼器中的行轉換為動態面板。
四、步驟詳解
1、表格表頭設置：
-
使用矩形元件制作不需要參與拖動的表頭，例如“序號、操作”列。
-
需要拖動的列使用中繼器實現，設置布局為水平，命名為表頭中繼器。
-
在表頭中繼器表格中，設置排序列（如“xh”列）和內容列，排序列用于邏輯交互。
2、表格數據行設置：
-
數據行直接使用中繼器，這里定義好列對應的字段，命名為數據行中繼器。
-
中繼器如果需要移入高亮效果，可以設置相應的交互樣式。
3、拖動列設置：
-
這里使用矩形元件，分別復制表頭的矩形和數據行的矩形組合成表格完整的一列，這里命名為拖動列組合。
-
當我們鼠標拖動列頭的某列時，其實就是控制拖動列的顯示及位置移動。
4、動態面板設置：
-
表頭中繼器內部添加一個動態面板，置于最上方，用于拖動交互。
-
動態面板寬度和表格同寬，高度為列頭的高度。
5、交互設置：
- 表頭中繼器載入時：設置中繼器按照排序列（如“xh”列）的升序排列。
- 中繼器每項加載時：將中繼器表格中的內容設置到對應的矩形元件中。
- 動態面板交互：分別設置好拖動開始時、拖動時、拖動結束時、移動時、單擊時的交互。
五、注意事項
-
在設置拖動效果時，要確保動態面板的高度和位置適中，以便于用戶拖動。
-
在計算移動距離和目標位置時，要考慮邊界情況，如拖動到底部或頂部時的處理。
-
可以根據需要添加美化效果，如高亮顯示、斑馬線效果等。
通過以上步驟，就可以在Axure中實現表格行的任意拖動調換位置排序功能。這一功能在自定義表格、數據展示等場景中非常實用。
?
