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.
drag and drop: http://www.w3schools.com/htmL/html5_draganddrop.asp
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
No hay comentarios:
Publicar un comentario