cómo arrastrar y soltar elementos y archivos HTML usando Javascript
para definir un efecto de soltar, se deben seguir los siguientes pasos:
5.1. Determine los efectos de colocación permitidos en el elemento arrastrable en su controlador de eventos dragstart
Usando la propiedad effectAllowed en la propiedad de eventos dataTransfer, defina todos los efectos de colocación que se permiten aplicar a ese elemento arrastrable.
esto se hace ya que se pueden definir diferentes ubicaciones de gota y se pueden manejar diferentes efectos de gota por ubicación de gota.,
La siguiente tabla define las posibles effectAllowed los valores de la propiedad basada en el MDN docs:
5.2. Para cada ubicación de colocación, defina los efectos de colocación para ella en su controlador de eventos dragover
el efecto de colocación a definir debe ser uno de los efectos permitidos determinados en el controlador de eventos dragstart de la ubicación de origen.,
Cuando un efecto de caída no es uno de los efectos de caída permitidos, se establecerá como uno de los efectos de caída permitidos.
el controlador de arrastrar, donde se debe definir el efecto de soltar, se ejecuta cuando el elemento arrastrado se arrastra sobre una posible ubicación de soltar.
el siguiente es un ejemplo de cómo definir los efectos de colocación para una ubicación de colocación en particular.
6) Definir la Zona de Caída (Drop Ubicación)
Por defecto, ningún elemento en el documento HTML permite una gota., Sin embargo, eso se puede cambiar y para hacer de un elemento una zona de colocación, debe tener:
- El controlador de eventos ondragover, que se ejecuta cuando el elemento arrastrable se arrastra sobre este elemento. En este controlador de eventos, el efecto de caída de la ubicación de caída se define como se mencionó anteriormente en el paso 5.2.
- El controlador de eventos ondrop, que se ejecuta cuando se suelta el elemento arrastrable en la ubicación/zona de arrastre.
el siguiente es un ejemplo de definición de un elemento como una ubicación de colocación.,
en los controladores de eventos dragover y drop, se debe llamar a preventDefault() para permitir una drop, ya que indica que una drop está permitida en esa ubicación.
si un drop solo se permite en ciertas situaciones en las que se utilizan condiciones, entonces solo agregue preventDefault si se cumplen las condiciones para permitir un drop. Esto se hace para evitar que el elemento sea una zona de caída si no se cumplen las condiciones en las que no se debe permitir la caída.,
rechazar un drop basado en el tipo de los datos de arrastre en la propiedad dataTransfer es un caso común. El siguiente ejemplo lo demuestra al permitir que solo se suelten enlaces en el elemento drop zone que tiene el controlador dragover.
7) manejar la caída del elemento
durante el evento drop, los datos de arrastre deben ser procesados. Para ello, se utiliza el método getData() en la propiedad de Evento dataTransfer.,
el método getData () recupera los elementos de arrastre ya que toma un solo argumento del tipo de datos a recuperar y devolverá el valor de cadena asociado con él.
Las propiedades allowedEffect y dropEffect ayudan a controlar la retroalimentación que se presentará al usuario.
el manejo de dichos comentarios es responsabilidad del desarrollador y debe implementarse en el controlador de eventos drop. Por ejemplo, al recuperar un elemento y agregarlo a otro padre, se moverá, pero al copiar el nodo se producirá un efecto de copia.,
si se definen varios efectos de colocación para una sola zona de colocación, se debe usar la propiedad dropEffect para determinar qué operación de arrastre se deseaba para este evento de colocación en particular.
el siguiente es un ejemplo de cómo manejar un drop.
a Veces, usted puede han apoyado a tipos diferentes de los mismos datos, pero sólo desea recuperar el tipo más específico. El siguiente código de MDN docs lo demuestra.,
8) Uso dragend Evento para Comprobar si la Caída fue de Éxito
al final de una operación de arrastre, un dragend evento se desencadena en el elemento origen. El evento se activa si el arrastre fue exitoso o se canceló.
para comprobar si la operación de arrastre tuvo éxito o no, el valor del dropEffect se puede comprobar de la siguiente manera:
- si el valor de la propiedad dropEffect es «none» en el controlador de eventos dragend, entonces significa que las operaciones de arrastre se cancelaron.,
- de lo contrario, el valor de la propiedad dropEffect es la operación que se realizó correctamente.
Hmm, entonces, ¿cómo es esto útil?
el elemento fuente puede usar esta información después de una operación de movimiento exitosa para eliminar el elemento arrastrado de la ubicación anterior.
Demo sobre el arrastre del elemento HTML & Drop
nota: también puedes clonar el proyecto desde mi GitHub aquí.,
1) Detect the Drag & Drop Feature Support in Your Browser
Before using the HTML drag & drop API, add feature detection code to ensure browser support.
The following code is the feature detection code for the HTML drag & drop API from Modernizr.,
2) Definir la Zona de Caída (Drop Ubicación)
Por defecto, ningún elemento en el documento HTML permite una gota. Sin embargo, eso se puede cambiar y para hacer que un elemento sea una zona de colocación, debe tener:
- El controlador de eventos ondragover, que se ejecuta cuando los archivos se arrastran sobre la ubicación de colocación.
- El controlador de eventos ondrop, que es el ejecutado cuando el archivo(S) es/son soltados en la ubicación de caída.,
como indica MDN docs:
los eventos dragstart y dragend no se activan al arrastrar un archivo al navegador desde el sistema operativo.
el siguiente es un ejemplo para definir un elemento como una ubicación de colocación.
3) manejar la caída del archivo
Cuando el usuario suelta el archivo(s) en una zona de caída, se activará un evento de caída. Durante el evento drop, los archivos deben procesarse como se desee.,
para acceder a cada archivo caído, utilice la propiedad DataTransfer del evento para acceder a la propiedad files. Después de acceder a un archivo caído, utilice la API de archivos para procesarlo.
si el navegador admite la propiedad DataTransferItemList, puede usarla con el método getAsFile () en lugar de usar la propiedad DataTransfer para acceder al archivo.
en los controladores de eventos dragover y drop, se debe llamar a preventDefault() para permitir una gota, ya que indica que una gota está permitida en esa ubicación., También evita que se abra el archivo, que es el comportamiento predeterminado que se produce al soltar un archivo en una página web.
si un drop solo se permite en ciertas situaciones en las que se utilizan condiciones, entonces solo agregue preventDefault si se cumplen las condiciones para permitir un drop. Esto se hace para evitar que el elemento sea una zona de caída si no se cumplen las condiciones en las que no se debe permitir la caída.
el siguiente ejemplo, de MDN docs, muestra el procesamiento de archivos sueltos, donde se ignora un elemento de arrastre que no es un archivo., Both possible ways are demonstrated in this
Demo on HTML Element’s Drag & Drop
Note: you can also clone the project from my Github here.