0
124
Views¿Por qué la segunda imagen no se coloca en la posición correcta en html y Javascipt?
Tengo el siguiente código en el que se implementa un simple arrastrar y soltar con una imagen. por alguna razón, la primera imagen funciona, la segunda no, cuando la coloco dentro de los cuadros div y se muestra fuera de ella. Alguien sabe porque la segunda imagen se muestra mal con respecto a la primera?
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)); alert("Wrong") } #div4{ position: absolute; left: 905px; top: 900px; width: 400px; height: 125px; margin: 10px; border: 5px solid black; background-color:white; } #getData { width: 250px; height: 200px; border: 5px solid #4f4d4d; left: 400px; top = 500px } <h3>Drag the GeekforGeeks image into the rectangle:</h3> <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="center" src="Immagine.png" draggable="true" ondragstart="drag(event)" width="100" height="100"> <img src="Immagine.png" id ="prova" draggable="true" ondragstart="drag(event)" style="position:absolute; margin-left:20.6%" width ="100" height="100"> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
·
Juan Pablo Isaza
1 answers
Answer question0
La solución no es tan difícil. Acaba de intentar agregar un margen entre la primera imagen y la segunda imagen. Y esto hizo que la imagen pareciera como si no estuviera adjunta al div principal. Como puede ver en la figura, ambas imágenes se agregan al div. 
Entonces, elimina el margen izquierdo en la segunda imagen. o quitarlo cuando se está cayendo.
Aquí hay un ejemplo práctico de lo que quiero decir.
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)); //Set the value of your margin here //Don't raise the value so it doesn't overlap the container //And you can change the value from px to rem, em... document.getElementById(data).style.margin = 0 + "px"; alert("Wrong"); } #div4 { position: absolute; left: 905px; top: 900px; width: 400px; height: 125px; margin: 10px; border: 5px solid black; background-color: white; } #getData { width: 250px; height: 200px; border: 5px solid #4f4d4d; left: 400px; top: 500px; } <h3>Drag the GeekforGeeks image into the rectangle:</h3> <div id="getData" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="center" src="Immagine.png" draggable="true" ondragstart="drag(event)" width="100" height="100" /> <img src="Immagine.png" id="prova" draggable="true" ondragstart="drag(event)" style="position: absolute; margin-left: 20.6%" width="100" height="100" /> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
·
Juan Pablo Isaza
Report
Answer question