La fila debe arrastrarse a su índice de destino cuando se arrastra de arriba a abajo y viceversa con la animación DnD.
La fila no obtiene DnD cuando se arrastra desde el índice inferior al superior. El arrastre de arriba a abajo funciona, pero el elemento se agrega después del índice de la última página y no al índice de destino. La animación DnD parece no funcionar tan bien.
Puede consultar este espacio aislado para replicar el problema.
Caso 1: Arrastre de arriba a abajo
Caso 2. Arrastrar de abajo hacia arriba
El mismo código funciona con el componente List de react-virtualized pero no con el componente Table.
React estás usando?16.13.0
react-beautiful-dnd está ejecutando?13.0.0
react-virtualized está ejecutando?9.22.3
Cromo
He creado este sandbox para replicar el problema. Puede ejecutar esto para verificar el problema.
https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js
¿Alguien puede echar un vistazo a la caja de arena y ayudarme? ¡Avísame si necesitas otra información!
Así que hoy, depuré esto más y progresé un poco. Parece que el problema fue con la implementación de rowRenderer. Había un div contenedor adicional encima del dom de defaultRowRenderer. Pude resolver el problema parcialmente. Aquí está el nuevo enlace de sandbox con el código actualizado.
Ahora, queda un problema: el desplazamiento no funciona al arrastrar la fila. ¿Alguna sugerencia de cómo puedo solucionar esto?
Finalmente, resolvió el problema (no estoy seguro si esta es la forma correcta). La solución fue pasar ref como div de contenedor de desplazamiento virtualizado de reacción en lugar de div de contenedor principal virtualizado de reacción.
Había actualizado el sandbox anterior con la corrección.
Antes
ref={(ref) => { if (ref) { // eslint-disable-next-line react/no-find-dom-node const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref); if (whatHasMyLifeComeTo instanceof HTMLElement) { provided.innerRef(whatHasMyLifeComeTo); } } }}Después (arreglar)
ref={(ref) => { if (ref) { const whatHasMyLifeComeTo = document.getElementsByClassName( "ReactVirtualized__Grid ReactVirtualized__Table__Grid" )[0]; if (whatHasMyLifeComeTo instanceof HTMLElement) { provided.innerRef(whatHasMyLifeComeTo); } } }}