Blog
HTML5 es actualmente soportado por la mayoría de los navegadores e incluye muchas funcionalidades nuevas, entre ellas la posibilidad de hacer un drag and drop de manera muy sencilla y sin tener que incluir librerías externas. Es por ese motivo que en este tutorial aprenderemos a utilizar la técnica de drag and drop en HTML5.
¿Cómo realizar un drag and drop en HTML5?
Con el siguiente código podemos arrastrar una imagen a otra etiqueta div.
<html>
<head>
<title>Drag and drop en HTML5</title>
<style>
.rect{
width: 300px;
height: 67px;
background: #E4E4E4;
border: 1px solid black;
margin:2px;
}
</style>
</head>
<body>
<div class="rect">
<img id="drag1" src="https://unipython.com/wp-content/uploads/2015/10/logo-programacion-extrema.png" draggable="true" ondragstart="drag(event)" >
</div>
<div id="div1" class="rect" 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));
}
</script>
</body>
</html>
Para que un elemento sea draggable se debe indicar con el atributo draggable en true:
<img draggable="true">
En en ejemplo anterior el atributo ondragstart llama a la función drag que especifica qué datos pueden ser draggable.
El método dataTransfer.setData() define el tipo de dato y el valor de los datos draggable, en este caso, el tipo de dato es “text” y el valor es el id del elemento draggable (“drag1”):
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
El evento ondragover especifica dónde los datos draggable se pueden descartar. Por defecto, los elementos no pueden ser dejados en cualquier lugar, para evitar esto debemos utilizar la siguiente función en el evento ondragover:
function allowDrop(ev) {
ev.preventDefault();
}
Cuando se deja caer los datos draggable, se produce un evento. En el ejemplo anterior, el atributo ondrop llama a la función drop (evento):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Bueno gente, eso es todo lo que se debe saber a la hora de hacer un drag and drop en HTML5, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.
Hola buen día ¿Cómo estas? este código lo podría utilizar para selenium webdriver para hacer pruebas.