Réorganisation des colonnes de table avec réaction par glisser-déposer

Question

J'ai une table html qui devrait pouvoir réorganiser les rangées ainsi que les colonnes.

lignes Réorganiser est assez straight forward mais réordonnancement des colonnes est assez difficile car les cellules d'une colonne ne partagent pas le même élément parent.

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

Comment implémenter le déplacement de colonnes avec reagir?

Answer 1

Vous devez ajouter une couche d'abstraction supplémentaire entre les données et la vue, où les index de colonne seront utilisés. Par exemple:

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

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

Ensuite, lorsque vous faites glisser des colonnes - vous modifiez simplement les index dans les colonnes var.

Answer 2

Je pense que vous devrez implémenter un DragLayer personnalisé afin d'obtenir ce que vous voulez faire - de cette façon, vous aurez un contrôle total sur ce à quoi ressemble l'aperçu glisser, et peut le faire rendre une colonne au lieu de la seule cellule que vous obtiendriez de l'aperçu de base.

Ensuite, vous pouvez faire en sorte que si une colonne est déplacée toutes ses cellules obtiennent display: none ou quelque chose pour qu'elles disparaissent, et votre DragLayer personnalisé montre ensuite l'utilisateur la colonne rendue dans une nouvelle table comme votre Aperçu.

Il a un très bon tutoriel sur la façon d'écrire un DragLayer personnalisé ici: http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html que vous pouvez suivre pour de l'aide.