La API de arrastrar y soltar es una característica nueva de HTML5. En comparación con otras características nuevas, representa el 60% de la importancia y el 30% del uso en el desarrollo real.
2. ¿Qué es arrastrar y soltar?Arrastrar: arrastrar
Lanzamiento: Soltar
Arrastrar significa que el mouse hace clic en el objeto de origen y sigue moviendo el objeto sin soltarlo. Una vez que lo suelta, se suelta.
3. ¿Qué son los objetos de origen y los objetos de destino?Objeto fuente: se refiere a algo en lo que hacemos clic con el mouse. Puede ser una imagen, un DIV, un fragmento de texto, etc.
Objeto de destino: se refiere a cuando arrastramos el objeto de origen y lo movemos a un área. El objeto de origen puede ingresar a esta área, pasar el cursor sobre esta área (sin soltarlo) y soltar el objeto de origen aquí (ya lo sueltas). También puede abandonar el área después de flotar.
4. Funciones relacionadas de API de arrastrar y soltarDespués de explicar qué son el objeto de origen y el objeto de destino, volvamos a la API de arrastrar y soltar en la interfaz. De las operaciones anteriores, podemos derivar varias funciones.
Eventos que pueden desencadenarse por el objeto fuente arrastrado:
(1)ondragstart: el objeto de origen comienza a arrastrarse
(2)ondrag: el objeto de origen se está arrastrando (el mouse puede estar moviéndose o no)
(3)ondragend: el objeto de origen se arrastra hasta el final
Arrastre el objeto de origen para ingresar los eventos que puede desencadenar el objeto de destino de arriba:
(1)ondragenter: el objeto de destino se arrastra al objeto de origen
(2) ondragover: el objeto de destino es arrastrado por el objeto de origen y se sitúa sobre él.
(3)ondragleave: el objeto de origen se arrastra lejos del objeto de destino
(4)ondrop: Arrastra el objeto de origen y suelta/suelta sobre el objeto de destino.
¡La API de arrastrar y soltar tiene un total de 7 funciones! !
5. Cómo transferir datos entre el evento del objeto de origen arrastrado y el evento del objeto de destinoHTML5 proporciona un nuevo atributo para todos los eventos relacionados con el arrastre:
e.dataTransfer { } //数据传递对象
Función: se utiliza para pasar datos entre eventos del objeto de origen y el objeto de destino.
Guarde los datos en un controlador de eventos en el objeto de origen:
e.dataTransfer.setData( k, v ); //kv必须都是string类型
Leer datos en un controlador de eventos en el objeto de destino:
var v = e.dataTransfer.getData(k);
Ejemplo 1: implementar un avión pequeño que pueda moverse mientras se arrastra el mouse
Consejo: ¡El avión debe estar absolutamente posicionado! ¡Obtenga el valor de coordenadas del mouse en el evento ondrag! ! !
El código es el siguiente:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <título></título> <estilo> cuerpo{ margen:0; posición: relativa } img{ posición:absoluta; </style> </head> <body> <h3>Avión pequeño que se mueve al arrastrar el ratón</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('La fuente del evento p3 comienza a arrastrarse'); //Registra el desplazamiento del mouse en el plano justo después de arrastrar offsetX= e.offsetX; e. .ondrag=function(e){ console.log('Se está arrastrando la fuente del evento p3'); console.log(x+'-'+y); //En el último momento del evento de arrastre, las coordenadas del mouse no se pueden leer y tanto la páginaX como la páginaY se vuelven 0 if(x==0 && y==0 ){ return; // No maneja la situación en la que X e Y son 0 en el último momento de arrastrar} x-=offsetX y-=offsetY; arriba=y+'px'; p3.ondragend=function(){ console.log('Fin del arrastre del objeto fuente p3');El efecto es el siguiente:
Ejemplo dos:
Simula el efecto de un bote de basura en una computadora. Se muestran un total de tres aviones pequeños. Después de arrastrar un avión pequeño a la parte superior del bote de basura, el avión pequeño se elimina del árbol DOM.
Consejo: La eliminación requiere eliminar el elemento del nodo secundario DOM y se debe evitar el comportamiento predeterminado de ondragover. ! ¡Utilice la transferencia de datos entre el objeto de origen y el objeto de destino para registrar el valor de identificación del avión pequeño! ! !
Información importante:
¡ondragover tiene un comportamiento predeterminado! ! ! Ahí es cuando se activa ondragover, ¡ondrop fallará! ! ! ! ¡Esto puede ser un problema con la versión del navegador, que solo puede resolverse si el navegador se actualiza continuamente en el futuro! !
¿Cómo detenerlo?
ondragover= function(e){ //Cuando el objeto de origen se desplaza sobre el objeto de destino e.preventDefault(); //Evita el comportamiento predeterminado para que la caída pueda activar...}ondrop= function(e){ // El el objeto de origen se libera en el objeto de destino...}El código es el siguiente:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <título></título> <estilo> cuerpo { text-align: center } #trash { opacidad: .2; : 15px; } </style> </head> <body> <h3>Eliminar elementos secundarios del árbol DOM después de arrastrar el plano a la papelera</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p5 clase =src src=img/p5.png> <script> //Agregar monitoreo de eventos para el objeto de origen - registrar qué var de objeto de origen fue arrastrado srcList = document.querySelectorAll('.src');//Buscar todos los elementos img for(var i=0; i<srcList.length; i++){ //Recorrer los elementos img var p = srcList[i]; = function(e){ //Comienza a arrastrar el objeto fuente e.dataTransfer.setData('PlaneID',this.id); //Guarda los datos: la identificación del elemento img } p.ondrag = function(){} p.ondragend = function(){} } //Agregar escucha de eventos para el objeto de destino - eliminar el objeto de origen arrastrado trash.ondragenter = function(){ //El objeto de origen ingresa al destino object console .log('drag enter'); trash.style.opacity = 1; //Cambiar la transparencia a 1 } trash.ondragleave= function(){ //Después de que el objeto de origen abandona el objeto de destino, console.log(' arrastrar permiso'); trash.style.opacity = .2; //Cambiar la transparencia a 0.2 } trash.ondragover= function(e){ //El objeto de origen se sitúa sobre el objeto de destino e.preventDefault() //Evita el comportamiento predeterminado, Make drop triggerable} trash.ondrop= function(e){ //El objeto de origen se libera en el objeto de destino console.log('drop'); trash.style.opacity = .2; //Eliminar el objeto fuente arrastrado var id = e.dataTransfer.getData('PlaneID'); //Obtener datos - valor de id var p = document.getElementById(id); //Buscar elementos relacionados según el valor de id p. parentNode.removeChild(p); //Eliminar nodos secundarios del elemento principal} </script> </body> </html>El efecto es el siguiente:
Después de arrastrar el avión pequeño a la papelera para eliminarlo:
Como se muestra en la imagen, originalmente había tres aviones pequeños, ¡pero ahora hay dos! ! !
6. ¡Puntos de conocimiento complementarios sobre la API de arrastrar y soltar! ! (¡¡Importante, es posible que le pregunten durante la entrevista!!)Preguntas de la entrevista:
¿Cómo mostrar una imagen del cliente (computadora) en una página web?
¿Cómo arrastrar la página web del cliente para mostrarla en la página descargada del lado del servidor?
¿Qué significan estas dos preguntas?
¡Por lo general, arrastramos y soltamos una imagen desde la computadora al navegador para implementar la operación de descarga! ! ! De acuerdo con los estándares anteriores a H5, es imposible arrastrar y soltar directamente una imagen en el navegador para mostrarla. ! Pero desde que aparecieron las nuevas funciones de H5, se agregó la función de API de arrastrar y soltar, ¡que realiza perfectamente esta función! ! !
Ocasiones de aplicación:
En un determinado sitio web, sube una imagen como avatar.
Subir foto...
Nuevos objetos de operación de archivos en HTML5:
Archivo: representa un objeto de archivo
FileList: representa un objeto de lista de archivos, similar a una matriz
FileReader: utilizado para leer datos de archivos
FileWriter: utilizado para escribir datos en archivos
Funciones relacionadas:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //Buscar el archivo arrastrado y soltado var fr = new FileReader() //Crear un lector de archivos fr.readAsURLData(f); //Leer el contenido del archivo fr.onload = function(){ //Lectura completada img.src = fr.result //Usar los datos leídos} }El código es el siguiente:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa; radio de borde: 3px; relleno: 10px; margen: 10px; altura mínima: 400px; </style> </head> <body> <h1>Conocimientos ampliados sobre la API de arrastrar y soltar</h1> <h3>Arrastre su foto al área del cuadro a continuación</h3> <div id=container></ div > <script> //Escuche el evento de colocación del documento - cancele su comportamiento predeterminado: abra la imagen en una nueva ventana document.ondragover = function(e){ e.preventDefault() //Habilite que se active el evento de colocación. } documento.ondrop = function(e){ e.preventDefault(); //Evita que la imagen se abra en una nueva ventana; de lo contrario, la operación de descarga aún se realizará. ! ! } //Escuche el evento de caída de div#container, intente leer los datos de la imagen publicada y muéstrelos container.ondragover = function(e){ e.preventDefault() } container.ondrop = function(e){ console; .log ('El cliente arrastró una imagen y la soltó...') //El objeto de destino actual lee los datos almacenados en el objeto fuente de arrastrar y soltar //console.log(e.dataTransfer); //Mostrar un problema //console.log(e.dataTransfer.files.length); //El número de imágenes arrastradas var f0 = e.dataTransfer.files[0]; //console.log(f0); /Archivo objeto Archivo //Leer datos del archivo objeto var fr = new FileReader(); //fr.readAsText(f0); //Leer cadena de texto del archivo fr.readAsDataURL(f0); //Lee los datos de la URL del archivo fr.onload = function(){ console.log('Lectura del archivo completada') console.log(fr.result); ; //Contenedor de datos URL.appendChild(img} } </script> </body> </html></span>El efecto es el siguiente:
ResumirLo anterior es una explicación detallada de los ejemplos clásicos de API de arrastrar y soltar HTML5 presentados por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. . ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!