Comentario: Antes de HTML5, para implementar operaciones de arrastrar y soltar de los elementos de la página web, era necesario confiar en MouseDown, MouseMove, MouseUp y otras API para implementarlos a través de una gran cantidad de código JS. Ahora HTML5 simplifica enormemente la dificultad de las operaciones de arrastrar y soltar de los elementos de la página web. Además de admitir arrastre y caída de elementos dentro del navegador, la API también admite arrastrar datos entre el navegador y otras aplicaciones.
Antes de HTML5, para implementar operaciones de arrastrar y soltar de los elementos de la página web, debemos confiar en Mousedown, MouseMove, MouseUp y otras API para implementarlos a través de una gran cantidad de código JS; HTML5 presenta una API que admite directamente las operaciones de arrastrar y soltar, lo que simplifica enormemente la dificultad de programar las operaciones de arrastrar y soltar de los elementos de la página web. Además de admitir arrastre y caída de elementos dentro del navegador, estas API también admiten la arrastre de datos entre el navegador y otras aplicaciones.
Este artículo utiliza un ejemplo simple para demostrar cómo usar API de arrastrar y soltar en HTML5.
Escena:
Como se muestra en la figura a continuación, queremos implementar:
Arrastre la foto desde el área del álbum izquierdo al área de la lata de basura derecha arrastrando y dejando caer; Durante el proceso de arrastre, la parte recordatoria cálida debe recordarse rápidamente, y la operación de arrastre y caída se está llevando a cabo actualmente;
Método de implementación:
Como se muestra en la interfaz anterior, el código HTML es relativamente simple, como sigue:
<! Doctype html>
<html>
<Evista>
<title> html5 implementa la operación de arrastrar y soltar </title>
<meta charset = "utf-8"/>
<estilo>
.álbum
{
Border: 3px Dable #CCC;
flotante: izquierda;
margen: 10px;
Min-altura: 100px;
relleno: 10px;
Ancho: 220px;
}
</style>
</ablo>
<cuerpo ">
<div>
<h2> Recordatorio cálido: puede arrastrar las fotos directamente a la basura lata </h2>
</div>
<div>
<h2> álbum </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<div>
<h2> basura puede </h2>
</div>
<br/>
</body>
</html>
Nota: Si desea implementar operaciones de arrastrar y soltar, debe agregar atributo draggable = true a los elementos para ser arrastrados y eliminados;
A continuación, agregue el siguiente código JS al evento Onload. Los comentarios son más detallados y no se explicarán por separado.
<script>
función init () {
Var info = document.getElementById ("info");
// Obtenga los elementos de arrastrar y soltar. Este ejemplo es el Div donde se encuentra el álbum.
var src = document.getElementById ("álbum");
// Comenzar la operación de arrastrar y soltar
src.ondragStart = function (e) {
// Obtén la identificación con foto de arrastrar y soltar
var dragimgid = e.target.id;
// Obtener elemento arrastrado
var dragimg = document.getElementById (dragimgid);
// termina la operación de arrastrar y soltar
dragimg.ondragend = function (e) {
// recuperar el mensaje de recordatorio
info.innerhtml = "<h2> Recordatorio creativo: puede arrastrar las fotos directamente a la basura lata </h2>";
};
e.datatransfer.setData ("texto", dragimgid);
};
// Arrastre y suelta el proceso
src.ondrag = function (e) {
info.innerhtml = "<h2>-La foto se está arrastrando-</h2>";
}
// Obtener el elemento de destino de arrastrar y soltar
var Target = document.getElementById ("basura");
// Cerrar el procesamiento predeterminado;
Target.ondragenter = function (e) {
E.PreventDefault ();
}
Target.ondragover = function (e) {
E.PreventDefault ();
}
// Algo se arrastra y cae al elemento objetivo
Target.ondrop = function (e) {
var draggedId = e.datatransfer.getData ("texto");
// consigue el objeto DOM en el álbum
var Oldelem = document.getElementById (dragGedId);
// Eliminar el nodo de la foto del álbum Div
Oldelem.parentnode.removechild (Oldelem);
// Agregue el nodo DOM de foto arrastrado al Div Trash;
Target.appendChild (Oldelem);
info.innerhtml = "<h2> Recordatorio creativo: puede arrastrar las fotos directamente a la basura lata </h2>";
E.PreventDefault ();
}
}
</script>
Darse cuenta del efecto: