javascript - ドラッグアンドドロップによる反応によるテーブル列の並べ替え

Question

行と列を並べ替えることができる html テーブルがあります。

行の並べ替えは非常に簡単ですが、列のセルは同じ親要素を共有していないため、列の並べ替えは非常に困難です。

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

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

Answer 1

これを実行するには、カスタム DragLayer を実装する必要があると思います-そうすれば、ドラッグプレビューがどのように見えるかを完全に制御でき、列をレンダリングできます基本的なプレビューから得られる単一のセルの代わりに。

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

彼は、カスタム DragLayer の作成方法に関する非常に優れたチュートリアルをここに持っています: http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.htmlを参照してください。