dnd kit
@dnd-kit
useDraggable y useDroppable . y no lo obligará a rediseñar su aplicación ni a crear nodos DOM adicionales.@dnd-kit/sortable , que es una capa delgada construida sobre @dnd-kit/core . Más ajustes preestablecidos vendrán en el futuro. Para saber cómo comenzar con dnd kit , visite el sitio web de documentación oficial. Encontrará documentación API detallada, consejos y guías que le ayudarán a crear interfaces de arrastrar y soltar.
La biblioteca principal de dnd kit expone dos conceptos principales:
Aumente sus componentes existentes utilizando los ganchos useDraggable y useDroppable , o combine ambos para crear componentes que se puedan arrastrar y soltar.
Maneje eventos y personalice el comportamiento de sus elementos arrastrables y áreas desplegables utilizando el proveedor <DndContext> . Configure sensores para manejar diferentes métodos de entrada.
Utilice el componente <DragOverlay> para representar una superposición arrastrable que se elimina del flujo normal del documento y se coloca en relación con la ventana gráfica.
Consulte nuestra guía de inicio rápido para saber cómo empezar.
La extensibilidad es el núcleo del kit dnd . Está diseñado para ser delgado y extensible. Incluye las características que creemos que la mayoría de la gente querrá la mayor parte del tiempo y proporciona puntos de extensión para construir el resto sobre @dnd-kit/core .
Un excelente ejemplo del nivel de extensibilidad del kit dnd es el ajuste preestablecido Sortable, que se crea utilizando los puntos de extensión expuestos por @dnd-kit/core .
Los principales puntos de extensión del kit dnd son:
Crear interfaces accesibles de arrastrar y soltar es difícil; dnd kit tiene una serie de valores predeterminados y puntos de partida sensatos que le ayudarán a hacer accesible su interfaz de arrastrar y soltar:
aria que deben pasarse a elementos arrastrablesConsulte nuestra guía de Accesibilidad para obtener más información sobre cómo puede ayudar a brindar una mejor experiencia a los lectores de pantalla.
A diferencia de la mayoría de las bibliotecas de arrastrar y soltar, dnd kit no está construido intencionalmente sobre la API HTML5 de arrastrar y soltar. Esta fue una decisión arquitectónica deliberada, que conlleva ventajas y desventajas que usted debe tener en cuenta antes de decidir usarlo, pero para la mayoría de las aplicaciones, creemos que los beneficios superan las ventajas y desventajas.
La API HTML5 de arrastrar y soltar tiene algunas limitaciones graves. No admite dispositivos táctiles ni el uso del teclado para arrastrar elementos, lo que significa que las bibliotecas construidas sobre él deben exponer una implementación completamente diferente para admitir esos métodos de entrada. Tampoco admite casos de uso comunes, como bloquear el arrastre a un eje específico o a los límites de un contenedor, estrategias personalizadas de detección de colisiones o incluso personalizar la vista previa del elemento arrastrado.
Si bien existen soluciones para algunos de estos problemas, esas soluciones generalmente aumentan la complejidad del código base y el tamaño general del paquete de la biblioteca, y generan inconsistencias entre las capas del mouse, el tacto y el teclado porque funcionan con implementaciones completamente diferentes.
La principal desventaja de no utilizar la API de arrastrar y soltar HTML5 es que no podrá arrastrar desde el escritorio ni entre ventanas. Si el caso de uso de arrastrar y soltar que tiene en mente implica este tipo de funcionalidad, definitivamente querrá usar una biblioteca construida sobre la API HTML 5 de arrastrar y soltar. Le recomendamos encarecidamente que consulte reaccionar-dnd para obtener una biblioteca de React que tenga un backend nativo HTML 5 de arrastrar y soltar.
El kit dnd te permite crear interfaces de arrastrar y soltar sin tener que mutar el DOM cada vez que un elemento necesita cambiar de posición.
Esto es posible porque dnd kit calcula y almacena de forma perezosa las posiciones iniciales y el diseño de sus contenedores desplegables cuando se inicia una operación de arrastre. Estas posiciones se transmiten a sus componentes que usan useDraggable y useDroppable para que pueda calcular las nuevas posiciones de sus elementos mientras se realiza una operación de arrastre y moverlos a sus nuevas posiciones usando propiedades CSS de alto rendimiento que no activan un repintado como translate3d y scale . Para ver un ejemplo de cómo se puede lograr esto, consulte la implementación de las estrategias de clasificación expuestas en la biblioteca @dnd-kit/sortable .
Esto no quiere decir que no puedas cambiar la posición de los elementos en el DOM mientras los arrastras, esto es algo compatible y, a veces, inevitable. En algunos casos, no será posible saber de antemano cuál será la nueva posición y diseño del elemento hasta que lo mueva en el DOM. Solo sepa que este tipo de mutaciones en el DOM mientras se arrastra son mucho más costosas y provocarán un repintado, por lo que, si es posible, prefiera calcular las nuevas posiciones usando translate3d y scale .
dnd kit también utiliza oyentes SyntheticEvent para los eventos de activación de todos los sensores, lo que conduce a un rendimiento mejorado en comparación con la adición manual de oyentes de eventos a cada nodo individual que se puede arrastrar.
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities Deberá instalar todas las dependencias en el directorio raíz. Dado que @dnd-kit es un monorepo que usa Lerna y Yarn Workspaces, npm CLI no es compatible (solo hilo).
yarn installEsto instalará todas las dependencias en cada proyecto, las compilará y las vinculará simbólicamente a través de Lerna.
En una terminal, ejecute yarn start en paralelo:
yarn start Esto construye cada paquete en <packages>/<package>/dist y ejecuta el proyecto en modo de observación para que cualquier edición que guarde dentro de <packages>/<package>/src provoque una reconstrucción en <packages>/<package>/dist . Los resultados se transmitirán a la terminal.
yarn start:storybookEjecuta el libro de cuentos. Abra http://localhost:6006 para verlo en el navegador.
Puedes jugar con paquetes locales en el patio de juegos impulsado por Parcel.
yarn start:playground Esto iniciará el patio de juegos en localhost:1234 . Si tiene lerna ejecutando watch en modo paralelo en una terminal y luego ejecuta paquete, su área de juegos se recargará en caliente cuando realice cambios en cualquier módulo importado cuya fuente esté dentro de packages/*/src/* . Tenga en cuenta que para lograr esto, el comando start de cada paquete pasa a TDSX el indicador --noClean . Esto evita que Parcel explote entre reconstrucciones debido a errores de Archivo no encontrado.
Consejo de seguridad importante: al agregar o modificar paquetes en el área de juegos, use el objeto alias en package.json. Esto le indicará a Parcel que los resuelva en el sistema de archivos en lugar de intentar instalar el paquete desde NPM. También corrige errores duplicados de React que puedas encontrar.
(En una tercera terminal) puede ejecutar Cypress y ejecutará las pruebas de integración con el libro de cuentos.
