Hola como están?!?!, en esta ocasión les traigo un ejemplo básico de arrastrar y soltar (drag and drop) en HTML5 y JavaScript que por el momento solo es compatible con firefox pero que es muy útil. CÓDIGO HTML NECESARIO: Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Arrastrar y Soltar - HTML5</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
function empezar(e) {
e.dataTransfer.effectAlloweb = 'move';
e.dataTransfer.setData("Data", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
function enter(e) {
return true;
}
function over(e) {
var esarrastrable = e.dataTransfer.getData("Data");
var id = e.target.getAttribute('id');
if (id == 'caja_principal')
return false;
if (id == 'caja_objetos' && esarrastrable == 'objeto1')
return false;
else
return true;
}
function drop(e) {
var esarrastrable = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(esarrastrable));
e.stopPropagation();
return false;
}
function end(e) {
e.dataTransfer.clearData("Data");
return true
}
</script>
</head>
<body>
<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
Primer Objeto.
</div>
<div id="objeto2" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
Segundo Objeto.
</div>
</div>
<div id="caja_objetos" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
</div>
</body>
</html> ARCHIVO style.css: Código HTML:
#caja_principal, #caja_objetos {
float:left;
width:250px;
height:300px;
padding:10px;
margin:10px;
}
#caja_principal{
background:#CCCCCC;
}
#caja_objetos{
background:#666666;
}
#objeto1, #objeto2{
text-align:center;
width:75px;
height:50px;
padding:10px;
margin:10px;
}
#objeto1{
background:#0099FF;
}
#objeto2{
background:#0066FF;
}
-------------------------------------------------------------------------------------------------------
Paso a explicar cada "pedasito" del código
jejee
Código HTML:
<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
Primer Objeto.
</div>
<div id="objeto2" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
Segundo Objeto.
</div>
</div>
En esta etiqueta div podemos visualizar los siguientes aspectos claves:
Código HTML:
<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)"></div>
En ella se destacan las siguientes tres características:
1. draggable="true" ----> es lo que hace que un objeto sea capas de arrastrase.
2. ondragstart="return empezar(event)" ----> ondragstart define el momento cuando la persona intenta arrastrar el objeto.
3. ondragend="return end(event)" ----> define que va a pasar cuando se suelte el objeto.
Código HTML:
<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)"></div>
Este código pertenece al objeto que va a arrastrarse al hacer clic. y tiene las siguientes caracteristicas:
1. draggable="true" ----> es lo que hace que un objeto sea capas de arrastrase.
2. ondragstart="return empezar(event)" ----> ondragstart define el momento cuando la persona intenta arrastrar el objeto.
3. ondragend="return end(event)" ----> define que va a pasar cuando se suelte el objeto.
Una ves que definamos esto debemos configurar los eventos con javascript! Código HTML:
<script type="text/javascript">
function empezar(e) {
e.dataTransfer.effectAlloweb = 'move';
e.dataTransfer.setData("Data", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
function enter(e) {
return true;
}
function over(e) {
var esarrastrable = e.dataTransfer.getData("Data");
var id = e.target.getAttribute('id');
if (id == 'caja_principal')
return false;
if (id == 'caja_objetos' && esarrastrable == 'objeto1')
return false;
else
return true;
}
function drop(e) {
var esarrastrable = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(esarrastrable));
e.stopPropagation();
return false;
}
function end(e) {
e.dataTransfer.clearData("Data");
return true
}
</script> Explicación breve de como funciona cada función:
Al definir la función "
empezar" le decimos al navegador como debe usar correctamente el div cuando arrastremos.
Al definir la función "
enter" queremos definir que los objetos arrastrables puedan situarse en los div contenedor.
Al definir la función "
over" esta función recupera el objeto arrastrable y la div contenedora y verifica si puede alojarla o no.
Al definir la función "
drop" recupera los datos del objeto arrastrado y utiliza la función pre-construida appendChild() para verificar y agregar el contenido, También se define si debe o no continuar el evento.
Al definir la función "
end" usamos esta función para limpiar los datos del objeto arrastrado y darle la opción de seguir con otros.
Bueno con esto terminamos puedes tocar todo el código para ir probando y buscándole la utilidad
Muchas gracias a todos y espero que les sirva Saludos!