如何使用Sortable庫實現表格列的拖拽排序而不改變行順序？

使用Sortable庫實現表格列拖拽排序，保持行不變

許多開發者在使用Sortable庫進行拖拽排序時，需要實現僅對列進行拖拽排序，而行保持不變的功能。本文將詳細講解如何利用Sortable庫實現此功能。

問題描述：

假設表格數據以二維數組存儲，目標是實現列的拖拽排序，例如將“value11”列移動到“value22”列的位置，最終效果是兩列交換位置，但行數據保持不變。 (此處省略圖片示例)

解決方案：

核心思路是利用Sortable庫對列索引進行排序，然后根據新的索引順序重新渲染表格數據。Sortable庫操作的是數組元素的順序，我們不直接操作Sortable移動數組元素，而是利用它提供的索引排序結果來重新組織數據。

假設你的數據結構如下：

let data = [   ['value11', 'value12', 'value13'],   ['value21', 'value22', 'value23'],   ['value31', 'value32', 'value33'] ];

使用Sortable庫后，假設得到新的列索引順序：

let newOrder = [1, 0, 2]; // Sortable返回的新順序，表示第二列現在排在第一位

根據newOrder重新構建表格數據：

let newData = data.map(row => row.map((_, index) => row[newOrder[index]]));

newData 現在包含了重新排序后的列數據，你可以用newData重新渲染表格。 記住，數組索引從0開始，而表格顯示時可能需要加1。Sortable庫只負責索引排序，數據的重組需要根據Sortable提供的索引順序手動完成。

通過這種方法，你可以利用Sortable庫的拖拽功能實現表格列的排序，同時保持行順序不變，從而達到預期的效果。 關鍵在于理解Sortable庫操作的是索引，而不是數據本身，需要開發者根據索引重新構造數據。