Hola buen día necesito ayuda con el evento drag and drop en JavaScript, resulta que lo necesito hacer es arrastrar una imagen que tengo dentro de un div y soltar la imagen a otro div todo dentro de un mismo documento en HTML, la primera parte me funciona bien sin ningún tipo de problema pero cuando voy arrastrar de nuevo la imagen y colocarla en donde estaba inicialmente no me deja hacer esta acción? La verdad nose que esta fallando ya que este mismo código ya lo he utilizado en otro tipo de interacciones se supone que debería de funcionar si me traje el mismo código de otra parte en donde ya me ha funcionado bien sin ningún tipo de error, a continuación dejo el código de ejemplo:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Yes No Questions </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script type="text/javascript" src="js/funct_lib.js"></script>
<script src="file_path.txt"></script>
</head>
<body onLoad="cambiar()">
<div id="content">
<div id="img_1" class="letra1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra1_1" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div id="img_2" class="letra2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra2_2" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div id="img_3" class="letra3" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra3_3" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div id="img_4" class="letra4" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra4_4" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div class="boton1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra1_1" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div class="boton2" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra1_1" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div class="boton3" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra1_1" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div class="boton4" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="letra1_1" name="letra" height="30" maxwidth="96" draggable="true" ondragstart="drag(event)">
</div>
<div id="afien">
</div>
<div class="botonn1">
</div>
<div class="botonn2">
</div>
<div class="botonn3">
</div>
<div class="botonn4">
<div class="nextd">
<img id="next" width="96" height="30">
</div>
</div>
</body>
</html>
funct_lib.js
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");
ev.target.appendChild(document.getElementById(data));
}
Les agradezco a todos por sus respuesta de verdad necesito ayuda con esto lo mas pronto posible, gracias
Respuesta
¿Demasiados anuncios?
Rubén García Puntos -10
Has probado a hacerlo con JQuery? Seguramente te ahorre mucho trabajo y quebraderos de cabeza.
Te paso unos ejemplos para que cojas el que mejor se pueda adaptar a tus necesidades.
https://jqueryui.com/droppable/#propagation
https://jqueryui.com/droppable/#photo-manager (Con éste puedes fijarte en el evento de devolver la imagen de la papelera y hacerlo con otro draggable o algo así)
Un saludo!
