重新排序表格列與反應通過拖放

重新排序行是相當straight forward但重新排序列是相當困難的，因爲一列的單元格不共享相同的父元素。

<table> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    </tr> 
</table>

如何實現列拖動與反應？

2016-11-21 HaNdTriX

您是否找到解決方案？我堅持完全相同的問題。 – morne

這可能工作。 https://github.com/schrodinger/fixed-data-table-2 – morne

還沒有。我採用了更簡單的方法。 – HaNdTriX

您應該在數據和視圖之間添加額外的抽象層 - 將使用列索引。例如：

var data : [["a","b","c"],["a2","b2","c2"]]; 
var columns = [2,1,0]; 

function getData(row, col) { 
    return data[row][columns[col]]; 
}

然後，當您拖動列 - 您只需更改列var內的索引。

2016-11-21 21:46:17 Nosyara

感謝您的回答。但我的問題是，我無法同時拖動多個元素，因爲它們不共享通用根節點。您的答案針對性能問題。我的問題是更多DOM/React導向。 – HaNdTriX

我想你必須實現一個自定義的DragLayer才能讓它做你想做的事 - 這樣，你將完全控制拖拽預覽的樣子，並且可以使它渲染出一列而不是從基本預覽中獲得的單個單元格。

然後你可以這樣做，如果一個列被拖動，它的所有單元格都會顯示：none或其他東西，以便它們消失，然後，您的自定義DragLayer會向用戶顯示列表中呈現的列作爲您的用戶預習。

他有一個關於如何在這裏編寫自定義DragLayer的相當不錯的教程：http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html，您可以隨時尋求幫助。

2016-12-20 04:27:37

回答