Como mover elementos con Html5
La función Drag & Drop en Html 5 permite arrastrar y soltar prácticamente cualquier contenido en un documento web, se define como un mecanismo basado en eventos y no requiere de librerías como jQuery, esta nueva característica hace que la interactividad con el usuario del sitio web sea mas sencilla y real.
Para que un elemento se pueda arrastrar y soltar en Html 5, agregamos el atributo draggable=”true” al elemento que queremos arrastrar, para realizar este ejemplo necesitaremos hacer uso del DOM y de Javascript, comenzamos como siempre por crear un documento Html 5 en el que incluimos un elemento <div> con dos eventos, “ondrop” y “ondragover”, este elemento será el elemento de destino donde arrastraremos la imagen.
El evento ondrop se activa cuando se suelta un elemento sobre el elemento de destino.
El evento ondragover se activa cuando se esta arrastrando un elemento y se posiciona sobre el elemento de destino.
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>Los eventos “ondrop” y “ondragover” llaman a las funciones soltar() y permitirSoltar() respectivamente, ambas funciones contendrán el método preventDefault() para evitar la manipulación por defecto del navegador de los elementos, para obtener los datos arrastrados en la función soltar() utilizamos el método dataTransfer.getData(), en este caso, el tipo de datos es “Text”. Por último utilizamos el método appendChild() para mover un elemento dentro de otro.
function soltar(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function permitirSoltar(ev) {
ev.preventDefault();
}A continuación creamos un elemento <img> con un identificador, este elemento contendrá un evento draggable=”true”, que permitirá que el elemento se pueda arrastrar, y un evento ondragstart, que se activará cuando se comience a arrastrar el elemento.
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">El evento “ondragstart” llama a la función arrastrar(), el método dataTransfer.setData() define el tipo de datos y el valor de los datos arrastrados, en este caso, el tipo de datos es “Text” y el valor es el identificador del elemento arrastrable.
function arrastrar(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}Para visualizar correctamente el ejemplo necesitaremos incluir un poco de CSS, al menos debemos darle al elemento <div> un tamaño y un borde para visualizarlo mejor, este es el resultado del ejemplo, arrastra la imagen y suéltala dentro del recuadro.
El código del ejemplo
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Didesweb Drag & Drop</title>
<style>
div {width:43px;height:43px;border:1px solid #CCCCCC;}
</style>
<script>
function permitirSoltar(ev) {
ev.preventDefault();
}
function soltar(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function arrastrar(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
</script>
</head>
<body>
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">
</body>
</html>Ahora que ya hemos visto el funcionamiento de Drag & Drop podemos comenzar a crear aplicaciones más complejas, por ejemplo vamos a hacer que la imagen esté dentro de un elemento <div> y se pueda mover a otro elemento <div>, en el código anterior colocamos el elemento <img> dentro del elemento <div> de esta forma
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)">
<img id="img" src="/conshimg/logo.png" draggable="true" ondragstart="arrastrar(event)">
</div>Y añadimos otro elemento <div>
<div ondrop="soltar(event)" ondragover="permitirSoltar(event)"></div>Puedes ver y descargar el código de este archivo en mi cuenta de GitHub
Pablo Guerra 28 agosto, 2022
Muy útil, muchas graciassss!!