Explicación detallada y código de instancia de HTML5

Autor：Eve Cole Fecha de actualización：2025-02-04 12:24:01

Breve introducción

Arrastre y cae es una característica común, es decir, arrastre a otra posición después del objeto de captura.

En HTML5, Drag and Drop es una parte estándar, y cualquier elemento se puede arrastrar y soltar.

Primero haga clic en un pequeño ejemplo: Ejecutar JavaScript cuando el usuario comience a arrastrar <p> elementos

 <p draggable = true OndragStart = myFunction (evento)> ¡Dárreme!

Consejo: los enlaces e imágenes se arrastran de forma predeterminada y no necesitan propiedades arrastrables.

Definición y uso

Los siguientes eventos se activarán durante el proceso de arrastrar y soltar:

Activar el evento (elemento de origen): ondragStart -user -Cuenta 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 -Cuando el objeto arrastrado por el mouse ingresa al contenedor, desencadena este evento
- 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

Soporte del navegador

Internet Explorer 9+, Firefox, Opera, Chrome y Safari admiten arrastre.

Nota: Safari 5.1.2 no es compatible con el arrastre;

Instancia

Publique primero el código y luego explique uno por uno:

 <! Borde: 1px sólido #aaaaaaa;} </style> </head> <body> <p> arrastre img_w3slogo.gif imagen a la caja rectangular: </p> <div ID = div1 ondrop = drop (event) ondragover = iShdrop (Incluso t)> </div> <br> <img id = drag1 src = images/img_w3slogo. Ev.preventDefalt ();} función drag (ev) {ev.datatransfer.setData (text, ev.target.id);} function drop (ev) {ev.preventDefault (); ; EV .Target.AppendChild (documen.getElementById (data));} </script> </body> </html>

El efecto de la página antes de arrastrar es:

Analicemos el significado del siguiente código a continuación.

Establecer el elemento se puede arrastrar y soltar

En primer lugar, para que el elemento sea arrastrado, configure la propiedad arrastrable en verdadera:

 <Img draggable = true>

Qué arrastrar-condragStart y setData ()

Luego se especifica lo que sucede cuando se arrastra el elemento.

En el ejemplo anterior, la propiedad OndragStart llama a una función, arrastre (evento), que especifica los datos arrastrados.

Método dataTransfer.setData () Establezca el tipo de datos y el valor de los datos de arrastre de datos:

 Función drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

En este ejemplo, el tipo de datos es texto, y el valor es ID (Drag1) que puede arrastrar el elemento.

Donde poner it-antagover

El evento Ondragover estipula dónde colocar los datos arrastrados.

Predeterminado, los datos/elementos no se pueden colocar en otros elementos. Si necesita establecer la ubicación permitida, debemos evitar el procesamiento predeterminado de elementos.

Esto es para llamar al evento.

 event.preventDefault ()

Put-Androp

Cuando se colocan los datos de arrastre, se produce el evento de caída.

En el ejemplo anterior, el atributo ONDROP llama a una función, Drop (evento):

 Function drop (ev) {ev.preventDefault ();

Explicación del código:

Llame a PreventDefault () para evitar el procesamiento predeterminado del navegador de los datos (el comportamiento predeterminado del evento de caída se abre en un enlace)
Obtenga los datos arrastrados a través del método DataTransfer.getData (texto). Este método volverá a cualquier datos del mismo tipo en el método setData ().
Los datos de arrastre es la ID del elemento de arrastre (drag1)
Elemento de arrastre adicional al elemento de colocación (elemento objetivo)

Los resultados de la implementación son los que se muestran en la figura:

Objeto dataTransfer

Durante la operación de arrastre, podemos usar el objeto DataTransfer para transmitir los datos para realizar otras operaciones en los datos cuando termine la operación de arrastre.

Atributo de objeto:

DROPEFFECT: configure o devuelva el comportamiento de arrastrar y soltar que ocurre en el objetivo de arrastrar y soltar. Si el comportamiento de arrastrar y soltar se establece aquí ya no dentro de las diversas configuraciones de comportamiento de arrastre y caída establecida por la configuración de atributos efectivos, la operación de arrastrar y soltar fallará. Este valor de atributo es solo uno de los cuatro valores de NULL, COPIE, LINK y MOVE.
EffectIntLOWED: Establezca o retroceda el comportamiento de arrastre que permitió el elemento de arrastre. Este valor de atributo se puede establecer en Ninguno, Copiar, Copylink, CopyMove, Link, LinkMove, Move, All y no inicializado.
Elementos: Este atributo devuelve el objeto DataTransferitems, que representa los datos de arrastre.
Tipos: este atributo devuelve un objeto DomstringList, que incluye todos los tipos de datos almacenados en datos en DataTransfer.

Método de objeto:

SetData (formato, datos): asigne los datos en el formato especificado al objeto DataTransfer.
GetData (formato): obtenga los datos en el formato especificado del objeto DataTransfer, el formato representa el formato de datos, los datos son datos.
ClearData ([formato]): elimine los datos del formato especificado del objeto DataTransfer.
AddElement (Elemento): Agregar icono personalizado
SetDragImage (Element, x, y): establezca el icono personalizado de la operación de arrastrar y soltar. Entre ellos, el elemento establece un ícono personalizado, X establece la distancia entre el icono y el mouse en la dirección horizontal, y la distancia entre el icono y el mouse en la dirección vertical.

Identificar lo que es dibujable

 Function dragStart_handler (ev) {console.log (dragStart); // Agregar la ID del elemento de destino al objeto de transferencia de datos ev.datatransfer.setData (text/sencillo, ev.targ et.id);} <body> <p id = p1 draggable = True OndragStart = DragStart_Handler (Event);> Este elemento es dibujable.

Definir los datos del arrastre

 Function dragStart_handler (ev) {// Agregar los datos de arrastre ev.datatransfer.setData (text/sencillo, ev.target.id); ;

Defina la imagen de arrastre

 Función dragStart_handler (EV) {// Crear una imagen y luego usarla para la imagen de arrastre. ();

Definir el efecto de arrastre

 Función dragStart_handler (ev) {// Establezca el efecto de arrastre para copiar ev.datatransfer.dropeffect = copy;}

Definir una zona de caída

 Function dragover_handler (ev) {ev.preventDefault (); Elemento a los datos domine del objetivo = ev.datatransfer.getData (text); Div> </body>

Problema de arrastre del navegador Firefox

Pero vaya aquí y encuentre un problema en el navegador Firefox:

El arrastre de HTML5 utiliza PreventDefault para evitar que aparezca la página pop -Up, pero ¿no funciona con Firefox?

Solución:

 document.body.ondrop = function (event) {event.preventDefault ();

O para el ejemplo anterior, también es posible agregar al método ONDROP:

 Function drop (ev) {ev.preventDefault ();

Lo anterior es todo el contenido de este artículo.