Arrastrar super héroes por el campo
importancia: 5
Esta tarea te puede ayudar a comprobar tu entendimiento de varios aspectos de Arrastrar y Soltar, y del DOM.
Hacer que todos los elementos con clase draggable sean arrastrables. Como la pelota de este capítulo.
Requerimientos:
- Usa delegación de eventos para detectar el inicio del arrastrado: un solo manejador de eventos en el
documentparamousedown. - Si los elementos son arrastrados a los bordes superior/inferior de la ventana: la página se desliza hacia arriba/abajo para permitir dicho arrastre.
- Sin desplazamiento horizontal (esto hace la tarea un poco más simple, añadirlo es fácil).
- Los elementos arrastrables o sus partes nunca deben dejar la ventana, incluso después de movimientos rápidos del ratón.
La demostración es demasiado grande para caber aquí, así que aquí está el enlace.
Para arrastrar el elemento podemos usar position:fixed, esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a position:absolute para fijar el elemento en el documento.
Cuando las coordinadas están en el tope/fondo de la ventana, usamos window.scrollTo para desplazarla.
Más detalles en el código, en los comentarios.