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