Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Droppable
| Name | Description | Default | Control |
|---|---|---|---|
| id* | ID del componente DragAndDrop. string | - | |
| children* | Hijos del componente. Element | Element[] | - | RAW children : {
type : {...} 4 keys props : {...} 3 keys |
| multipleDrags | Permite arrastrar múltiples elementos. boolean | false | |
| onValidate | Función de validación. (({ validate, active }: { validate: string[]; active: boolean; }) => void) | - | |
| validate | Indica si la validación está activa. boolean | false | |
| propValidate | Propiedad de validación. string | "data-validation" | |
| modifiers | Modificadores del DragAndDrop. "restrictToVerticalAxis""restrictToHorizontalAxis" | - | |
| screenReaderInstructions | Instrucciones para lectores de pantalla. string | "Para recoger un elemento arrastrable, presiona la barra espaciadora o la tecla Enter. Mientras arrastras, usa las teclas de flecha para mover el elemento en cualquier dirección deseada. Presiona nuevamente la barra espaciadora o la tecla Enter para soltar el elemento en su nueva posición, o presiona escape para cancelar." | |
| announcements | Anuncios ARIA. Announcements | ||
| defaultState | Estado por defecto del DragAndDrop. ItemType | - | |
| defaultValidate | Validaciones por defecto. string[] | - | |
| onState | Función de actualización de estado. (({ id, state, validateId }: { id: string; state: ItemType; validateId: string[]; }) => void) | - | - |
El componente DragAndDrop nos permite usar la HTML Drag and Drop API de una forma más sencilla e intuitiva. Construido a partir del paquete @dnd-kit, este componente provee diferentes funcionalidades, tales como la validación de los elementos arrastrables y todos los mecanismos necesarios para que sea accesible para personas con discapacidades. Para su implementación, solo necesitamos importar el componente <DragAndDrop/>. Este incluye los componentes <DragAndDrop.Container/>, <DragAndDrop.Drag/> y <DragAndDrop.Drop/>, necesarios para su uso. Haz clic en Show code en la parte inferior para ver y utilizar este ejemplo.
Droppable
La funcionalidad de validación consta de diferentes propiedades necesarias para su funcionamiento. Cada elemento <DragAndDrop.Drag/> necesita una propiedad id. Ten en cuenta esto, ya que es importante para los siguientes pasos. El <DragAndDrop.Drop> recibe una propiedad validate, que es un array. En este array se colocan los id de los elementos <DragAndDrop.Drag/> que pertenecen a ese elemento <DragAndDrop.Drop/>.
Para ejecutar la validación, el componente <DragAndDrop/> recibe la propiedad validate. Ten en cuenta que, una vez esta propiedad está en true, los demás componentes se bloquearán, impidiendo que sean arrastrados a otros <DragAndDrop.Drop/> o incluso al <DragAndDrop.Container/>.
Droppable B
Droppable A
Continuando con el tema de validación, para reiniciar tu <DragAndDrop/>necesitas usar la función handleResetDnd proveniente del custom hook useDragAndDropContext.
Droppable B
Con respecto al tema de accesibilidad (a11y), puedes utilizar las propiedades screenReaderInstructions y announcement. Cuando enfocamos un elemento <DragAndDrop.Drag/> utilizando un lector de pantalla, la propiedad screenReaderInstructions será leída por este. En otras palabras, esta propiedad se encarga de explicar al usuario con discapacidad cómo usar el componente a través del teclado. Por otro lado, cuando interactuamos con un <DragAndDrop.Drag/>, el lector de pantalla verbalizará los diferentes estados, tales como: onDragStart (cuando se agarra el elemento), onDragOver (cuando se mueve), onDragEnd (cuando se suelta) y onDragCancel (cuando se cancela el arrastre).
Droppable
Si necesitas personalizar completamente la apariencia del componente, puedes pasarle tus clases personalizadas de CSS a través de la propiedad addClass, la cual es aceptada por los componentes <DragAndDrop.Container/>, <DragAndDrop.Drag/> y <DragAndDrop.Drop/>. En cuanto a la validación, puedes utilizar el valor de la propiedad propValidate. Durante la validación, cada elemento <DragAndDrop.Drag/> recibirá un valor true o false. Un valor true indica que el <DragAndDrop.Drag/> está en el <DragAndDrop.Drop/> correcto, mientras que false significa lo contrario. Por defecto, propValidate tiene el valor de 'data-validation', pero puedes modificarlo según tus necesidades.
Droppable