En un único sentido:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
#area_foto {
width:350px;
height:70px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("mi_foto", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("mi_foto");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Coloca la foto en el rectángulo:</p>
<div id="area_foto" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="foto1" src="img/humphrey_bogart.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">
<img id="foto2" src="img/ingrid_bergman.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">
<img id="foto3" src="img/claude_rains.jpg" draggable="true"
ondragstart="drag(event)" width="62" height="70">
</body>
</html>
-----------------------------------------------------------------------------------------
En Ambos sentidos:
<!DOCTYPE HTML>
<html>
<head>
<style>
#area_origen, #area_descarga {
float:left;
width:300px;
height:75px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
// console.log("DATA:"+data);
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="area_origen" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img/humphrey_bogart.jpg" draggable="true" ondragstart="drag(event)" id="foto1" width="62" height="70">
<img src="img/ingrid_bergman.jpg" draggable="true" ondragstart="drag(event)" id="foto2" width="62" height="70">
<img src="img/claude_rains.jpg" draggable="true" ondragstart="drag(event)" id="foto3" width="62" height="70">
</div>
<div id="area_descarga" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
------------------------------------------------------------------------------------
Ejemplo de Drag and Drop con JQuery
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Drag an drop con JQuery</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/ejemplo3.js"></script>
</head>
<body>
Casablanca:
<div id="div_casa" class="zona_descarga" style="width:500px;height:100px;border:1px solid #000;"></div>
<hr>
Lo que el viento se llevó:
<div id="div_viento" class="zona_descarga" style="width:500px;height:100px;border:1px solid #000;"></div>
<img id="drag1" class="esCasa" src="img/humphrey_bogart.jpg" draggable="true">
<img id="drag2" class="esCasa" src="img/ingrid_bergman.jpg" draggable="true">
<img id="drag3" class="esCasa" src="img/claude_rains.jpg" draggable="true">
<img id="drag4" class="esViento" src="img/clark_gable.jpg" draggable="true">
</body>
</html>
ejemplo3.js:
$(function(){
var cont_errores = 0;
$(".zona_descarga").on("dragover",function(e){
e.preventDefault();
});
$(".esCasa").on("dragstart",function(e){
e.originalEvent.dataTransfer.setData("id_casa",e.target.id);
});
$(".esViento").on("dragstart",function(e){
e.originalEvent.dataTransfer.setData("id_viento",e.target.id);
});
$(".zona_descarga").on("drop",function(e){
e.preventDefault();
// $(this)[0].id tiene el id del elemento q se arrastra
id_final = $(this)[0].id.replace("div_", "");
var data = e.originalEvent.dataTransfer.getData("id_"+id_final);
if (data == "") {
cont_errores++;
alert("Error número "+cont_errores);
}
else {
e.target.appendChild(document.getElementById(data));
}
});
});
No hay comentarios:
Publicar un comentario