ドラッグ＆ドロップによる反応によるテーブル列の並び替え

Question

私は行と列の順序を変更できるhtmlテーブルを持っています。行を並べ替える

かなりstraight forwardですが、列のセルは同じ親要素を共有していないので、列の順序を変更することはかなり難しいです。

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

反応で列ドラッグを実装するにはどうすればよいですか？

Answer 1

データとビューの間に、列インデックスが使用される抽象レイヤーを追加する必要があります。例：

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

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

次に、列をドラッグすると、列var内のインデックスが変更されます。

Answer 2

私はあなたがそれをやりたいことをやり遂げるためにカスタムのDragLayerを実装する必要があると思います。そうすれば、ドラッグプレビューの外観を完全に制御して、それを作ることができます基本プレビューから取得する単一のセルの代わりに列をレンダリングします。

次に、列がドラッグされているときに、そのセルのすべてが表示：なしまたは何かが消えるようにして、カスタムDragLayerが新しいテーブルにレンダリングされた列をユーザーに表示するようにすることができますプレビュー

彼はここでカスタムDragLayerを書く方法について、かなり良いチュートリアルを持っています：http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.htmlあなたが助けに従うことができます。