Explicación detallada del evento de arrastrar y soltar en HTML5 (arrastrar y soltar)

Internet Explorer 9, Firefox, Opera 12, Chrome y Safari 5 admiten arrastrar y soltar.

 <! JavaScript> Función INTERSED (EV) {Ev.PreventDefault ();} Funcion Drag (Ev) {ev.datatransfer.setData (text, ev.target.id); Ev.datatransfer.getData (texto); (Event) onDragover = OnDraGover = permitrope (Evento)/> </body> </html>

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

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.

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 ()

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 ();

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)

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