La API HTML5 de arrastrar y soltar (DnD) significa que casi cualquier elemento de una página puede volverse arrastrable. En este artículo, cubriremos lo básico del arrastrar y soltar.
Crea contenido arrastrable
Cabe destacar que en la mayoría de los navegadores, las selecciones de texto, las imágenes y los enlaces se pueden arrastrar por defecto. Por ejemplo, si arrastras el logo de Google en Google Search, verás una imagen fantasma. La imagen puede arrastrarse y soltarse en la barra de direcciones, <input type="file" /> elemento, o incluso en el escritorio. Para que otros tipos de contenido sean arrastrables, necesitas usar la API de DnD en HTML5.
Para que un objeto sea arrastrable, establece el elementoarrastrable=verdadero。 El arrastre puede soportarse para casi cualquier elemento, incluyendo imágenes, archivos, enlaces, archivos o cualquier marcado en una página.
En nuestro ejemplo, crearemos una interfaz para reorganizar algunas columnas, que han sido diseñadas mediante CSS Grid. El marcado básico para estas columnas se muestra a continuación, con la propiedad de arrastre configurada a verdadero para cada columna.
Aquí está el CSS para mis elementos de contenedor y caja. Ten en cuenta que el único CSS relacionado con la funcionalidad de DnD es la propiedad cursor: mover. El resto del código solo controla la disposición y el estilo de los elementos del contenedor y la caja.
En este punto, verás que puedes arrastrar el objeto pero no pasará nada más. Para añadir funcionalidad de DnD, necesitamos usar la API de JavaScript.
Escucha los eventos drag
Se pueden adjuntar muchos eventos diferentes para monitorizar todo el proceso de arrastrar y soltar.
- Arranque de arrastre
- arrastrar
- Dragenter
- Dragleave
- Dragover
- Soltar
- dragend
Para procesar un flujo de DnD, necesitas algún tipo de elemento fuente (el punto de inicio del arrastre), la carga útil de datos (lo que intentas colocar) y el objetivo (el área donde se coloca el snap). Los elementos fuente pueden ser imágenes, listas, enlaces, objetos de archivo, bloques HTML, etc. El objetivo es aceptar la zona de caída (o conjunto de zonas de caída) de los datos que el usuario intenta colocar. Ten en cuenta que no todos los elementos pueden ser objetivos, por ejemplo, las imágenes no pueden ser objetivos.
Inicia y termina la secuencia de arrastrar y soltar
Después de definir la propiedad arrastrable="true" en el contenido, adjunta un gestor de eventos de arrastre para iniciar la secuencia de DnD de cada columna.
Este código establecerá la opacidad de la columna al 40% cuando el usuario empiece a arrastrar, y luego la restaurará al 100% al final del evento de arrastre.
Los resultados pueden verse en la demo de Glitch que aparece a continuación. Arrastra un objeto y se volverá opaco. Dado que el evento de arranque apunta al elemento fuente, poner esta opacidad de este estilo al 40% da al usuario una retroalimentación visual de que el elemento seleccionado actualmente se está moviendo. Después de colocar el elemento, el elemento fuente vuelve a una opacidad del 100%, aunque la función de colocación aún no se ha escrito.
Utiliza dragenter, dragover y dragleave para añadir pistas visuales adicionales
Para ayudar a los usuarios a entender cómo interactuar con tu interfaz, utiliza gestores de eventos dragenter, dragover y dragleave. En el siguiente ejemplo, las columnas pueden arrastrarse o dirigirse. Para ayudar a los usuarios a entender esto, cuando el usuario arrastra un elemento más allá de una columna, el borde de esa columna se convierte en una línea de puntos. Por ejemplo, puedes crear una clase sobre en CSS para representar un elemento que es un objetivo de colocación:
Luego, configura un gestor de eventos en JavaScript para añadir la clase over al arrastrar más allá de una columna y eliminarla al salir. En el manejador de arrastre, también queremos asegurarnos de que la clase se retire al final del arrastre.
Hay algunos puntos que mencionar en este código:
Al arrastrar un elemento como un enlace, necesitas bloquear el comportamiento predeterminado del navegador, que es navegar hasta ese enlace. Para ello, llama a e.preventDefault() en el evento de arrastre. Otra buena práctica es devolver false en el mismo handler.
Usa el manejador de eventos de dragenter para cambiar de clase, no el dragover. Si usas dragover, la clase CSS se activa varias veces porque el dragover de eventos se activa cuando la columna flota. Con el tiempo, esto hará que el renderizador del navegador haga mucho trabajo innecesario. Es mejor mantener siempre los redibujos al mínimo. Si necesitas usar eventos de arrastre por alguna razón, considera limitar o eliminar los oyentes de eventos.
Termina la colocación
Para gestionar la colocación real, añade un oyente de eventos para el evento de caída. En un controlador de caídas, tienes que bloquear el comportamiento de colocación por defecto del navegador, que suele ser algún tipo de redirección molesta. se puede llamar a e.stopPropagation() para evitar que el evento active el DOM.
Asegúrate de registrar al nuevo manejador en el otro manejador:
Si ejecutas el código en este momento, el proyecto no se colocará en una nueva ubicación. Para lograrlo, necesitas usar un objeto DataTransfer.
La propiedad dataTransfer es donde ocurren todas las maravillas de DnD. Guarda los fragmentos de datos enviados en la operación de arrastre. dataTransfer se establece en el evento de arrastre y se lee/procesa en el evento de caída. Llama a e.dataTransfer.setData(mimeType, dataPayload) para establecer el tipo MIME y la carga útil de datos del objeto.
En el siguiente ejemplo, permitiremos a los usuarios reorganizar el orden de las columnas. Para ello, primero necesitas almacenar el HTML del elemento fuente al principio del arrastre:
Maneja la colocación de la columna en el evento de drop, establece el HTML de la columna fuente en el HTML de la columna de destino donde se coloca, primero comprueba que la columna de destino arrastrada y soltada por el usuario sea la misma que la columna de origen.
Más propiedades de arrastre
El objeto dataTransfer expone propiedades que se utilizan para proporcionar retroalimentación visual al usuario durante el proceso de arrastre. Estas propiedades también pueden usarse para controlar cómo responde cada objetivo de colocación a tipos de datos específicos.
- dataTransfer.effectAllowed limita el "tipo de arrastre" que un usuario puede realizar sobre un elemento. Se utiliza en el modelo de manejo de arrastrar y soltar para inicializar el efecto dropEffect durante eventos de dragenter y arrastre. Esta propiedad puede establecerse en los siguientes valores: ninguno, copia, copyLink, copyMove, enlace, linkMove, move, todos y sin inicializar.
- dataTransfer.dropEffect controla la retroalimentación proporcionada al usuario durante los eventos de dragenter y dragover. Cuando el usuario pasa por encima del elemento objetivo, el cursor del navegador indicará el tipo de acción que se va a realizar (por ejemplo, copiar, mover, etc.). El efecto puede ser uno de los siguientes valores: ninguno, copiar, enlazar, mover.
- e.dataTransfer.setDragImage(imgElement, x, y) indica que no se utiliza la retroalimentación predeterminada de "imagen fantasma" del navegador, y en su lugar hay una opción para establecer el icono de arrastrar.
Sube archivos arrastrando y soltando
El siguiente ejemplo sencillo utiliza una columna como fuente de arrastre y objetivo de arrastre. Esto puede verse en la interfaz cuando se pide al usuario que reorganice los elementos. En algunos casos, arrastrar el objetivo y arrastrar la fuente puede ser diferente, como en una interfaz donde el usuario debe seleccionar una imagen como imagen principal del producto arrastrando la imagen seleccionada sobre el objetivo.
A menudo se utiliza arrastrar y soltar elementos para permitir que los usuarios arrastren elementos desde el escritorio a la aplicación. La principal diferencia es el encargado de la caída. Sin usar dataTransfer.getData() para acceder al archivo, los datos del archivo se incluirán en la propiedad dataTransfer.files:
Enlace original:El inicio de sesión del hipervínculo es visible.
|
Publicado el 26-4-2022 10:30:50
|
|
|
|
Publicado el 26-4-2022 21:27:25
|
