Arrastrar y Soltar con HTML5

Arrastrar y Soltar con HTML5 (Drag And Drop)

En una entrada anterior hablábamos de este mismo efecto Arrastrar y soltar con javaScript o (Drog And Drang) En esta ocasion vamos a utilizar el mismo efecto pero esta vez con HTML5.
En esta nueva entrada vamos a crearlo como te dije con el propio HTML5 y con un poquito de Java Script, si bien notamos que en esta ocasión vamos a utilizar java script nuevamente pero en este caso no la usamos tanto como en la entrada anterior.

Arrastrar y soltar Drog And Drap

En esta entrada solo vamos a crear un solo documento al cual lo vamos a llamar index.html que es donde se reflejara nuestro efecto de arrastrar y soltar como es un documento puro HTML5 no vamos a inventar con mas nada solo añadir algún trozo de java script para que nuestro efecto (Drog and Drap)funcione.

Archivo que contiene el codigo de arrastrar y soltar.

Index.html

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
function drag(parrafo, evento) {
evento.dataTransfer.setData('Text', parrafo.id);
}
function drop(contenedor, evento) {
var id = evento.dataTransfer.getData('Text');
contenedor.appendChild(document.getElementById(id));
evento.preventDefault();
}
</script>
<style>
body{
background: #045FB4; 
}
div#contenedor{
background:#F9f9f9; 
display:inline-block;
border:solid 1px #FF8000; 
width:600px; 
height: 600px; 
position:fixed; 
bottom:0px; 
top:10px;
right:10px;
color: #045FB4;
text-align:center; 
}
img#img{
width:120px;
height: 120px;
}
span#span{
color:#FFA500;
font-size:20px;
}
p#parrafo{
width:120px;
text-align:center;
}
</style>
</head>
<body>
<img id="img" draggable="true" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" ondragstart="drag(this, event)"/><p id="parrafo" draggable="true" id="span" ondragstart="drag(this, event)">
<img id="img" src="http://t0.gstatic.com/images?q=tbn:HQhMN5ibPav1DM:http://thecitylovesyou.com/cinerex/wp-content/uploads/2009/10/500-days-of-summer-soundtrack.jpg" /><br/>
<span id="span">Arrastrame!</span>
</p>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)">didve</div>
<div id="contenedor" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false">Contenendor</div>
</body>
</html>

Si te fijas lo que tenemos es un puro documento HTML5 en el cual en la etiquetas <head></head> hemos agregado un trozo de código java script el cual contiene 2 funciones que son las Drag y la Drog la cual se las colocamos a los elementos que queremos que sean accesible para arrastrar y soltar.

Luego tenemos un trozo de código CSS que nos permite darle un poco de estilo a nuestro div contenedor que es el cual contendrá o resivira los elementos que arrastremos y el mismo lo llamamos desde nuestro trozo de código Java Script.

Ver el resultado Drog And Drap

Deja un comentario

Tu dirección de correo electrónico no será publicada.