Drag (arrastrar)

Al arrastrar un elemento, los demás se apartan deslizándose y se colocan en el nuevo orden.

Añade una lista de arrastrar para reordenar ("Drag-to-Reorder List", también llamada sortable list) en [dónde].
El elemento arrastrado debe seguir el puntero directamente y elevarse un poco, mientras los demás se apartan deslizándose con suavidad; al soltarlo debe asentarse rápido en el hueco más cercano.
Admite táctil además de ratón, y ofrece una forma de mover elementos con el teclado que anuncie la nueva posición a los lectores de pantalla.

Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.

Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.

Arrastrar una lista hacia abajo muestra un indicador de carga y recarga el contenido al soltar.

Añade una interacción "Pull to Refresh" (también llamada swipe to refresh) en [dónde].
Al tirar de la lista hacia abajo desde arriba, debe seguir al dedo con algo de resistencia y mostrar un indicador de carga que gira mientras se tira; al soltar, sigue girando mientras se recarga el contenido y luego la lista vuelve a subir con suavidad.
Actívala solo cuando la lista ya esté en la parte superior, y ofrece también un control de recarga normal para usuarios de teclado y lector de pantalla.

Un divisor arrastrable muestra una imagen a un lado y otra al otro.

Añade un "Before-After Slider" (también llamado image comparison slider o compare slider) en [dónde].
Dos imágenes quedan superpuestas y, al arrastrar un divisor vertical, se ve más de una y menos de la otra; el divisor sigue al cursor directamente, sin retraso.
Empieza con el divisor en el centro y haz que funcione con el tacto y con las flechas del teclado.

La etiqueta del placeholder sube y se reduce por encima del campo cuando este recibe el foco o tiene contenido.

Añade un "Floating Label" (también llamado float label o animated placeholder) en [dónde].
Cuando el campo reciba el foco o tenga un valor, la etiqueta que está dentro debe deslizarse hacia arriba y reducirse hasta el borde superior del campo, de forma suave y rápida, y volver a bajar solo cuando el campo esté vacío y sin foco.
Mantenla como una etiqueta real vinculada al input y asegúrate de que la altura del campo no cambie para que el formulario nunca se desplace.

Un icono de corazón se rellena de color y lanza pequeñas partículas o late al hacer clic.

Añade una animación "Like / Heart Burst" (también llamada heart animation o favorite toggle) en [dónde].
Al marcar me gusta, el corazón debe llenarse de color y dar un salto elástico mientras un anillo y pequeños puntos estallan hacia fuera y se desvanecen, todo rápido y juguetón; al desmarcarlo, el corazón solo se vacía en silencio.
Que sea un botón de alternancia real con su estado pulsado, y reproduce el estallido solo al activarlo.

Mantener pulsado un elemento un momento activa acciones extra o un relleno de progreso.

Añade una interacción de pulsación larga (Long Press) (también llamada press and hold o touch and hold) en [dónde].
Mientras se mantiene pulsado, el elemento debe hundirse un poco mientras un relleno de progreso lo recorre a ritmo constante; cuando se completa, rebota de vuelta y abre su menú, y si se suelta antes, se cancela y el relleno se reinicia.
Ofrece a los usuarios de teclado y lector de pantalla otra forma de llegar a las mismas acciones, y evita que la pulsación seleccione texto o abra el menú contextual del navegador.