En la actualidad, el diseño y la programación web se han convertido en una pieza clave para el éxito de cualquier proyecto online. Y no hay duda de que HTML5 es uno de los lenguajes de programación más utilizados. En este sentido, la herramienta de arrastrar y soltar HTML5 se ha convertido en una alternativa muy útil para muchos desarrolladores web. En este artículo, vamos a descubrir todo lo que necesitas saber sobre esta herramienta y cómo puedes utilizarla en tu proyecto web. ¡No te lo pierdas!
HTML 5 viene con un muy buen Arrastrar y soltar API de JavaScript que brinda soporte nativo de arrastrar y soltar al navegador. Esto hace que codificar DnD sea mucho más fácil. La especificación define un mecanismo basado en eventos (que depende de JavaScript y el marcado) para declarar que la mayoría de los elementos HTML se arrastrable en una página
Este soporte nativo da como resultado aplicaciones web más rápidas y con mayor capacidad de respuesta. Para lograr la funcionalidad de arrastrar y soltar con el estándar HTML 4los desarrolladores web tendrían que usar programación JavaScript compleja o integrar otros marcos JavaScript como jQuery.
Compatibilidad con navegador
La mayoría de los navegadores modernos Admite arrastrar y soltar. Internet Explorer 9, Firefox, Opera 12, Chrome y Safari 5 admiten arrastrar y soltar. Primeras versiones de Internet Explorer no son compatibles con HTML5 Arrastrar y soltar.
Hacer que un elemento se pueda arrastrar
Para hacer un elemento arrastrablesimplemente necesita establecer el atributo arrastrable en verdadero.
<element draggable="true">Ejemplo
Aquí hay un ejemplo, donde puede arrastrar una imagen a un div elemento.
<span id="trashMsg">Drag the crumpled paper into the trash can.</span>
<img id="paper" src="https://www.itgeared.com/html5-drag-drop-tutorial/crumpled_paper.png" draggable="true" ondragstart="drag(event)" width="120" height="120">
<div id="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
document.getElementById('trash').style.backgroundImage = "url('trash_full.jpg')"
document.getElementById('paper').style.visibility = "hidden"
document.getElementById('trashMsg').innerHTML = "Thanks for keeping the area clean!"
}
</script>Aparte de los eventos de arrastrar y soltar, también aprovechamos la DataTransfer objeto, que se utiliza para mantener los datos que se está arrastrando durante una operación de arrastrar y soltar. Puede contener uno o más elementos de datos, cada uno de uno o más tipos de datos.
Operaciones de arrastrar y soltar
En el ejemplo anterior, el ondragstart atributo llama a una función drag(event) que especifica qué datos se van a arrastrar. El dataTransfer.setData() El método establece el tipo de datos y el valor de los datos arrastrados. El ondragover El evento especifica dónde se pueden colocar los datos arrastrados.
Por defecto, los datos y/o elementos no se pueden colocar en otros elementos. Para permitir una caída, debemos evitar el manejo predeterminado del elemento. Esto se logra llamando al event.preventDefault() método para el ondragover evento. Cuando se sueltan los datos arrastrados, se produce un evento de soltar. En el ejemplo anterior, el ondrop atributo llama a una función, drop(event).
Escuchar eventos de arrastrar y soltar
En este tutorial, usamos el DataTransfer objeto para ayudarnos con las operaciones de arrastrar y soltar. Hay 7 eventos que se puede usar para monitorear todo el proceso de arrastrar y soltar.
| Evento | Descripción |
|---|---|
dragstart |
Se activa cuando el usuario comienza a arrastrar el objeto. |
dragenter |
Se activa cuando el mouse se mueve por primera vez sobre el elemento de destino mientras se produce un arrastre. |
dragover |
Se activa cuando el mouse se mueve sobre un elemento cuando se produce un arrastre. |
dragleave |
Se activa cuando el mouse abandona un elemento mientras se produce un arrastre. |
drag |
Se activa cada vez que se mueve el mouse mientras se arrastra el objeto. |
drop |
Se activa cuando se produce la caída. |
dragend |
Se activa cuando el usuario suelta el botón del mouse mientras arrastra un objeto. |
Por ejemplo…
<script>
var dragged;
document.addEventListener("drag", function (event) {
}, false);
document.addEventListener("dragstart", function (event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function (event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function (event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function (event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function (event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function (event) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged element to the selected drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false);
</script>