-1 votos

ayuda con evento drag and drop javascript

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

-1voto

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!

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: