Todos los ejemplos · Entrada · En Markdown, para IAs

Arrastrar y soltar

Qué enseña este ejemplo

Las cartas y el deslizador usan useDraggable, que mueve lo que se le da. Cada ranura es un useDropZone que acepta unas etiquetas: la roja y la amarilla son warm, la verde es cool, y la última ranura acepta las dos. Mientras una carta viaja, las ranuras que la aceptan muestran un contorno (canDrop()), encendido en la que está debajo (isOver()); en cualquier otro sitio, snapBack la devuelve a su casa. Una ranura llena se desactiva y se abre otra vez cuando su carta sale. Un clic en una carta sin moverla sigue dándole la vuelta.

El deslizador es el mismo hook sobre x, dentro de la pista, de diez en diez. El tirachinas usa solo los eventos de arrastre con listen: la piedra no sigue al puntero, y lo que se tira de ella apunta el lanzamiento.

Arrancando
Arrancando
—