Se implementan muchas funciones en la PC de HTML5, y las cargas de arrastre también se usan en el trabajo.
Evento de activación (elemento fuente) en el objetivo de arrastre:OndragStart -users dispara cuando el usuario comienza a arrastrar el elemento
Ondrag -Element se activa cuando se arrastra
Oncragend -user del elemento de finalización del gatillo de arrastre
Evento activado al liberar el objetivo:Ondragenter se activó este incidente cuando el objeto arrastrado por el mouse ingresa a su contenedor
Ondragover -Cuando un objeto arrastrado se arrastra dentro del rango de otro contenedor de objeto, desencadena este incidente
Ondragleeave -Trigle este incidente cuando el objeto arrastrado por el mouse deja el contenedor
Ondrop: Duración de un arrastre, desencadena este evento cuando libera la llave del mouse
Codificación
<html lang = en> <head> <meta charset = utf-8> <title> 拖拽 </title> <style> .Box {width: 800px; altura: 600px; float: left;} #box1 {fondo- Color: #ccc;}#box2 {Background-Color:#000;} </style> </head> <body> <div id = box1 class = box> </div> <div id = box2 class = box> </div> <img id = img1 src = 1.jpg> <div id = msg> </div> </body> <script> var box1div, box2div, msgdiv, img1; = Document.getElementById ('box1'); E) {E.PreventDefault ();} box2div.ondragover = function (e) {e.preventDefault ();} img1.ondragStart = function (e) d ',' img1 ');} box1div.ondrop = dropimghandler; .ondrop = dropimghandler;} function dropimghandler (e) {showObj (e); j) {s+= k+:+obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>Esta función puede arrastrar la imagen al método en los dos divs a la izquierda y a la derecha.
El siguiente es un código de arrastre y carga.
<! heig ht: 500px;} </style> </head> <body> <div id = imgContainer> </div> <div id = msg> </body> <script> var imgContainer, msgdiv; (E) {imgContainer = document.getElementById ('imgContainer'); E.PreventDefault (); // El siguiente es el proceso que se muestra en IMGContainer después de obtener la imagen. /> //} // Firster.ReadasDataurl (f); obj [k]+<br/>;} msgdiv.innerhtml = s;} </script> </html>Lo anterior es todo el contenido de este artículo.