Html5 arrastrar y soltar múltiples elementos
El usuario puede seleccionar elementos arrastrables con el ratón, arrastrar esos elementos hasta un elemento soltable y soltarlos soltando el botón del ratón. Una representación translúcida de los elementos arrastrables sigue al puntero durante la operación de arrastre.
Esta visión general de la función de arrastrar y soltar de HTML incluye una descripción de las interfaces, los pasos básicos para añadir soporte de arrastrar y soltar a una aplicación y un resumen de interoperabilidad de las interfaces.Eventos de arrastreLa función de arrastrar y soltar de HTML utiliza el modelo de eventos DOM y los eventos de arrastre heredados de los eventos del ratón. Una operación de arrastre típica comienza cuando un usuario selecciona un elemento que se puede arrastrar, arrastra el elemento hasta un elemento que se puede soltar y luego suelta el elemento arrastrado.
Los objetos DataTransfer incluyen el estado del evento de arrastre, como el tipo de arrastre que se está realizando (como copiar o mover), los datos del arrastre (uno o más elementos) y el tipo MIME de cada elemento arrastrado. Los objetos DataTransfer también tienen métodos para añadir o eliminar elementos a los datos del arrastre.
Las interfaces DragEvent y DataTransfer deberían ser las únicas necesarias para añadir capacidades de arrastrar y soltar HTML a una aplicación. (Firefox soporta algunas extensiones específicas de Gecko para el objeto DataTransfer, pero esas extensiones sólo funcionarán en Firefox).
¿Cómo se implementa la función de arrastrar y soltar en JavaScript?
Introducción a la API de arrastrar y soltar de JavaScript
Para arrastrar una imagen, basta con mantener pulsado el botón del ratón y luego moverla. Para arrastrar el texto, debe resaltar algún texto y arrastrarlo de la misma manera que arrastraría una imagen.
¿Cómo se arrastra un elemento en JavaScript?
addEventListener(“touchstart”, dragStart, false); container. addEventListener(“touchend”, dragEnd, false); container. addEventListener(“touchmove”, drag, false); container. addEventListener(“mousedown”, dragStart, false); container.
Javascript drag and drop ejemplo codepen
El atributo draggable está establecido en “true”, por lo que este elemento se puede arrastrar. Si este atributo se omitiera o se estableciera en “false”, el elemento no se arrastraría, y en su lugar se seleccionaría el texto.
El atributo draggable puede utilizarse en cualquier elemento, incluyendo imágenes y enlaces. Sin embargo, para estos dos últimos, el valor por defecto es “true”, por lo que sólo se utilizaría el atributo draggable con un valor “false” para desactivar el arrastre de estos elementos.
Nota: Cuando un elemento se convierte en arrastrable, el texto u otros elementos dentro de él ya no pueden ser seleccionados de la manera normal haciendo clic y arrastrando con el ratón. En su lugar, el usuario debe mantener pulsada la tecla Alt para seleccionar el texto con el ratón, o utilizar el teclado.
Dentro del evento dragstart, puede especificar los datos de arrastre, la imagen de retroalimentación y los efectos de arrastre, todos los cuales se describen a continuación. Sin embargo, sólo se requieren los datos de arrastre. (La imagen por defecto y los efectos de arrastre son adecuados en la mayoría de las situaciones.)Datos de arrastreTodos los eventos de arrastre tienen una propiedad llamada dataTransfer que contiene los datos de arrastre (dataTransfer es un objeto DataTransfer).
Biblioteca javascript de arrastrar y soltar
Ya existe una etiqueta con el nombre de rama proporcionado. Muchos comandos de Git aceptan tanto el nombre de la etiqueta como el de la rama, por lo que crear esta rama puede causar un comportamiento inesperado. ¿Estás seguro de que quieres crear esta rama?
¡Seguimos buscando más mantenedores! Si alguien está interesado en responder / triar los problemas, revisar / rechazar / aprobar PRs, y la autoría de código para la corrección de errores / nuevas características – por favor, envíe un correo electrónico a curtis.dulmage (at) shopify (dot) com. Es posible que se te hagan algunas preguntas antes de obtener el permiso de colaboración, pero si todo es correcto, te añadiremos con gusto como colaborador.
NOTA: Al instalar con npm o yarn, @shopify/draggable@1.0.0-beta.8 se instalará por defecto. Si quieres instalar la última versión, por favor instala @shopify/draggable@1.0.0-beta.13 o @shopify/draggable@next.
Actualmente estamos trabajando en la v1.0.0-beta.12. Consulta el tablero del proyecto para ver las tareas y seguir el progreso de la versión. Cualquier Pull Requests debe apuntar a la rama de características v1.0.0-beta.12.
Arrastrar y soltar en html
Muchos de estos estilos aún no están en juego, pero no importa. Lo más destacado, por ahora, es que la entrada del archivo está oculta, pero su etiqueta tiene el estilo de un botón, para que la gente se dé cuenta de que puede hacer clic en él para abrir el diálogo de selección de archivos. También estamos siguiendo una convención al delinear el área de caída con líneas punteadas.Añadiendo la funcionalidad de arrastrar y soltarAhora llegamos al meollo de la situación: arrastrar y soltar. Vamos a lanzar un script en la parte inferior de la página, o en un archivo separado, como quieras hacerlo. Lo primero que necesitamos en el script es una referencia a la zona de arrastre para poder adjuntarle algunos eventos:let dropArea = document.getElementById(‘drop-area’)
Ahora vamos a añadir algunos eventos. Empezaremos añadiendo manejadores a todos los eventos para evitar comportamientos por defecto y evitar que los eventos suban más de lo necesario:;[‘dragenter’, ‘dragover’, ‘dragleave’, ‘drop’].forEach(eventName => {
Ahora vamos a añadir un indicador para que el usuario sepa que efectivamente ha arrastrado el elemento sobre la zona correcta, utilizando CSS para cambiar el color del borde de la zona de caída. Los estilos ya deberían estar ahí bajo el selector #drop-area.highlight, así que usemos JS para añadir y quitar esa clase de resaltado cuando sea necesario.;[‘dragenter’, ‘dragover’].forEach(eventName => {