Drag and Drop consiste en arrastrar un elemento y soltarlo en otro lugar, en la web esto se facilita gracias a HTML5, con jQuery esto tambien es posible. Para hacer un Drag and Drop debes tener un navegador moderno o actualizado.
El siguiente código mueve una imagen entre tres divs:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
border:1px solid #aaaaaa;
float:left;
height:168px;
margin:10px;
width:163px;
}
</style>
<script>
function dejarSoltar(ev){
ev.preventDefault();
}
function arrastrar(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function soltar(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)">
<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz">
</div>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>
</body>
</html>
Explicación:
Para hacer un elemento arrastrable tiene que tener el siguiente atributo:
Como vamos a mover una imagen el código queda de la siguiente forma:
Es importante agregarle un id a la imagen.
Nota: En HTML Cualquier elemento puede ser arrastrable.
La imagen además de tener esos dos atributos, tambien debe tener el evento ondragstart que llama a una función (arrastrar(event)) ésta función especifica que datos van a ser arrastrados.
El método dataTransfer.setData() que contiene la función arrastrar() establece el tipo de datos y el valor de los datos arrastrados:
En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("carafeliz").
Se han creado tres divs, que son los "lugares" donde la imagen puede soltarse. Cada div tiene dos eventos que llaman a una función JavaScript ellos son: ondragover y ondrop.
El evento ondragover especifíca donde los datos arrastrados pueden ser soltados. Por defecto los datos o elementos no pueden ser soltados en otros elementos. Para ello se llama al método event.preventDefault().
Cuando los datos arrastardos son soltados la función soltar(event) se dispara.
Se Obtiene los datos arrastrados con el método dataTransfer.getData("Text"). Este método devolverá todos los datos que se establecieron en el método setData().
El dato arrastrado es el id del elemento arrastrable (imagen con id igual a carafeliz).
A través de appendChild se agrega el elemento en el div.
Demo/Código fuente
El siguiente código mueve una imagen entre tres divs:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div{
border:1px solid #aaaaaa;
float:left;
height:168px;
margin:10px;
width:163px;
}
</style>
<script>
function dejarSoltar(ev){
ev.preventDefault();
}
function arrastrar(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function soltar(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)">
<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz">
</div>
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>
</body>
</html>
Explicación:
Para hacer un elemento arrastrable tiene que tener el siguiente atributo:
draggable="true"
Como vamos a mover una imagen el código queda de la siguiente forma:
<img src="cara.jpg" draggable="true" id="carafeliz">
Es importante agregarle un id a la imagen.
Nota: En HTML Cualquier elemento puede ser arrastrable.
La imagen además de tener esos dos atributos, tambien debe tener el evento ondragstart que llama a una función (arrastrar(event)) ésta función especifica que datos van a ser arrastrados.
<img src="cara.jpg" draggable="true" ondragstart="arrastrar(event)" id="carafeliz">
El método dataTransfer.setData() que contiene la función arrastrar() establece el tipo de datos y el valor de los datos arrastrados:
function arrastrar(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
ev.dataTransfer.setData("Text",ev.target.id);
}
En este caso, el tipo de datos es "Texto" y el valor es el id del elemento arrastrable ("carafeliz").
Se han creado tres divs, que son los "lugares" donde la imagen puede soltarse. Cada div tiene dos eventos que llaman a una función JavaScript ellos son: ondragover y ondrop.
<div ondrop="soltar(event)" ondragover="dejarSoltar(event)"></div>
El evento ondragover especifíca donde los datos arrastrados pueden ser soltados. Por defecto los datos o elementos no pueden ser soltados en otros elementos. Para ello se llama al método event.preventDefault().
function dejarSoltar(ev){
ev.preventDefault();
}
ev.preventDefault();
}
Cuando los datos arrastardos son soltados la función soltar(event) se dispara.
function soltar(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Se Obtiene los datos arrastrados con el método dataTransfer.getData("Text"). Este método devolverá todos los datos que se establecieron en el método setData().
El dato arrastrado es el id del elemento arrastrable (imagen con id igual a carafeliz).
A través de appendChild se agrega el elemento en el div.
Demo/Código fuente
Comentarios
Publicar un comentario