miércoles, 26 de junio de 2019

Arrastra y suelta usando WAI-ARIA

La aria-grabbed
La aria-grabbed se utiliza para determinar si un elemento está en un estado agarrado para una operación de arrastrar y soltar.

Valores


  • `true` Indica que el elemento ha sido seleccionado para arrastrar.
  • "falso" Indica que el elemento no está actualmente seleccionado para arrastrar, pero puede estar disponible para arrastrar estableciendo la propiedad en `true`.

Si un elemento no tiene ninguna aria-grabbed el elemento no puede ser arrastrado.

El aria-grabbed en el siguiente ejemplo indica que el elemento de la lista se ha seleccionado para participar en una operación de arrastrar y soltar.
<li aria-grabbed="true">

La aria-dropeffect es un estado que indica el tipo de operación que se producirá cuando un objeto que participa en una operación de arrastrar y soltar se libera en el destino. Se puede proporcionar más de un valor como una lista de fichas separadas por espacios. La siguiente tabla enumera los valores posibles para aria-dropeffect.

Valores

`copy` La fuente se duplica y se suelta en el objetivo.
`move` El origen se elimina de su ubicación actual y se suelta en el destino.
`reference`Se creará una referencia o acceso directo al objeto de origen en el destino.
`ejecutar` Una función compatible con el objetivo se ejecuta utilizando la fuente de arrastre como entrada.
`popup` Se presenta un menú emergente o un cuadro de diálogo para que el usuario pueda elegir una de las operaciones compatibles (copiar, mover, referencia y ejecutar) u otra funcionalidad de arrastre.
`none` El objetivo no aceptará la fuente.
El aria-dropeffect en el siguiente ejemplo indica que el efecto de soltar un objeto en esta lista desordenada sería eliminar el objeto de su ubicación actual y copiarlo en esta lista.

<ul aria-dropeffect="move">
El modelo de evento de arrastrar y soltar HTML 5
Existe un modelo de eventos HTML 5 bien definido para las operaciones de arrastrar y soltar . El modelo es demasiado complejo para cubrirlo en detalle.

Datos sacados de :https://dev.opera.com/articles/accessible-drag-and-drop/

No hay comentarios:

Publicar un comentario