Se necesitan 5 minutos para descubrir cómo arrastrar y soltar html5, así como el orden de ejecución y otros eventos de monitoreo.
Definición y usoLos siguientes eventos se activarán durante el proceso de arrastrar y soltar:
Activa un evento en el objetivo de arrastre (elemento fuente):
Eventos desencadenados cuando se libera el objetivo:
Internet Explorer 9+, Firefox, Opera, Chrome y Safari admiten el arrastre.
Nota: Safari 5.1.2 no admite el arrastre; al arrastrar un elemento, el evento ondragover se activa cada 350 milisegundos.
Los ejemplos son los siguientes:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible = es decir = borde> <título>Ejemplo conciso de arrastrar y soltar de 5 minutos</título> <estilo> #draggable { ancho: 200px alto: 20px; alineación de texto: centro; fondo: blanco; } .dropzone {ancho: 200px; alto: 20px; fondo: blueviolet; margen inferior: 10px; .addEventListener(dragstart, función (evento) { console.log('==========dragstart Comenzar a ser arrastrado==========Un arrastre solo se ejecuta una vez'); // Guarda la referencia del elemento arrastrado (ref.) dragged = event.target; // Hazlo translúcido event.target. style.opacity = .5; }, false); /* El evento de arrastre se activa cuando se arrastra el elemento de destino*/ document.addEventListener(drag, function (event) { // console.log('==========drag==========El arrastre continuará monitoreando hasta que se suelte el elemento'); false /* Al colocar el objetivo); elemento Activar eventos */ document.addEventListener(dragover, function (event) { // console.log('==========dragover=========== Siempre escuchará al arrastrar, Hasta que se elimine el elemento'); // Impide la acción predeterminada para habilitar la eliminación event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('==========dragenter arrastra el elemento al elemento de destino==========corresponde. para arrastrarleave '); // Resalta el nodo de destino cuando el elemento arrastrable ingresa a la zona de colocación if (event.target.className == dropzone) { event.target.style.background = purple; document.addEventListener(dragleave, function (event) { console.log('==========dragleave arrastra el elemento lejos del elemento objetivo==========corresponde a dragenter') ; // Cuando el elemento arrastrado abandona el nodo de destino desplegable, restablece su fondo if (event.target.className == dropzone) { event.target.style.background = } }, document.addEventListener(drop, function); (evento ) { console.log('==========soltar soltar elemento==========Un arrastre solo se ejecuta una vez y se activa antes de dragenter'); Enlaces a algunos elementos) event.preventDefault(); // Mueve el elemento arrastrado al nodo de la zona de colocación seleccionada if (event.target.className == dropzone) { event.target.style.background = dragged.parentNode .removeChild(; arrastrado); event.target.appendChild(arrastrado); } }, false); document.addEventListener(dragend, función (evento) { console.log('==========dragend termina arrastrar====== =====Un arrastre solo se ejecuta una vez'); //Restablecer transparencia event.target.style.opacity = }, false </script></head><body> <div class=dropzone> <); ID de div = arrastrable draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Este es un DIV que se puede arrastrar </div> </div> <div class=dropzone></div> <div class= zona de caída </div> <div class=zona de caída></div></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.