jueves, 6 de diciembre de 2012

Drag and Drop en HTML5

Drag and Drop consiste en arrastrar un elemento y soltarlo en otro lugar, en la web esto se facilita gracias a HTML5, con jQuery esto tambien es posible. Para hacer un Drag and Drop debes tener un navegador moderno o actualizado.

El siguiente código mueve una imagen entre tres divs:


<!DOCTYPE HTML>
<html>
<head>

<style type="text/css">

div{

border:1px solid #aaaaaa;
float:left;
height:168px;
margin:10px;
width:163px;

}

</style>

<script>

function dejarSoltar(ev){
ev.preventDefault();
}

function arrastrar(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

function soltar(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

</script>

</head>

<body>

<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>

<div ondrop="soltar(event)" ondragover="dejarSoltar(event)">
<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz">
</div>

<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>

</body>
</html>


Explicación:

Para hacer un elemento arrastrable tiene que tener el siguiente atributo:

draggable="true"

Como vamos a mover una imagen el código queda de la siguiente forma:

<img src="cara.jpg" draggable="true" id="carafeliz">

Es importante agregarle un id a la imagen.

Nota: En HTML Cualquier elemento puede ser arrastrable.

La imagen además de tener esos dos atributos, tambien debe tener el evento ondragstart que llama a una función (arrastrar(event)) ésta función especifica que datos van a ser arrastrados.

<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz">

El método dataTransfer.setData() que contiene la función arrastrar() establece el tipo de datos y el valor de los datos arrastrados:

function arrastrar(ev){
  ev.dataTransfer.setData("Text",ev.target.id);
}

En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("carafeliz").

Se han creado tres divs, que son los "lugares" donde la imagen puede soltarse. Cada div tiene dos eventos que llaman a una función JavaScript ellos son: ondragover y ondrop.

<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>

El evento ondragover especifíca donde los datos arrastrados pueden ser soltados. Por defecto los datos o elementos no pueden ser soltados en otros elementos. Para ello se llama al método event.preventDefault().

function dejarSoltar(ev){
 ev.preventDefault();
}

Cuando los datos arrastardos son soltados la función soltar(event) se dispara.

function soltar(ev){
 ev.preventDefault();
 var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
}

Se Obtiene los datos arrastrados con el método dataTransfer.getData("Text"). Este método devolverá todos los datos que se establecieron en el método setData().
El dato arrastrado es el id del elemento arrastrable (imagen con id igual a carafeliz).
A través de appendChild se agrega el elemento en el div.

Demo/Código fuente

No hay comentarios.:

Publicar un comentario