jueves, 15 de enero de 2015

Tutorial Javascript parte 35 - API HTML5 drag and drop (Arrastrar y soltar)




En esta parte del tutorial continuamos con la api html5 para crear un sistema drag and drop, es decir poder desplazar elementos hacia el interior de otros elementos.


Código de ejemplo del capítulo, dragdrop.html ...


<!DOCTYPE html>
<html>
  <head>
    <title>Api HTML5 drag and drop (Arrastrar y soltar)</title>
    <meta charset="utf-8">
	
	<style>
	#drag {
	width: 50px;
	height: 50px;
	background: red;
	}
	
	#drop1, #drop2 {
	width: 300px;
	height: 300px;
	background: black;
	border: 1px solid white;
	}
	</style>
	
	<script>
	function DragDrop(drag, drop)
	{
	 var drag = document.getElementById(drag);
	 var drop = document.getElementById(drop);
	 
	 drag.ondragstart = function(e)
	 {
		//Guardamos el id del elemento para transferirlo al elemento drop
		//Content es una clave que nos permitirá acceder al valor asignado
		e.dataTransfer.setData("content", e.target.id);
	 }
	 
	 drop.ondragover = function(e){
		//Cancelar el evento que impide que podamos soltar el elemento drag
		e.preventDefault();
	 }
	 
	 drop.ondrop = function(e){
		//Obtenemos los datos a través de la clave content, en este caso el id
		var id = e.dataTransfer.getData("content");
		e.target.appendChild(document.getElementById(id));
	 }
	 
	}
	
	window.onload = function(){
		DragDrop("drag", "drop1");
		DragDrop("drag", "drop2");
	}
	
	</script>
	
  </head>
  <body>
  
  <div id="drag" draggable="true"></div>
  <div id="drop1"></div>
  <div id="drop2"></div>
  
  </body>
</html>


Vídeo tutorial de Javascript en Youtube