Boa tarde, estou fazendo um código de Drag and Drop e ao dropar uma imagem dentro de outra imagem, ela simplesmente some
No exemplo deste site as imagens ficam corretamente uma em cima das outras
Já no meu código (com imagens) ao colocar uma imagem (²) em cima da outra imagem (¹)... a imagem (²) some, podem me ajudar??
//Drag'n Drop functions
var elementCounter = 0; // Designa a ID ao elemento dropado
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.effectAllowed = "copy";
}
function drop(ev) {
ev.preventDefault();
var x = ev.clientX;
var y = ev.clientY;
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
if (original.parentNode.id == "conteudo") {
original.parentNode.removeChild(original);
alert("Movendo imagem ");
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
} else {
copyimg.id = "dropped_elem" + (++elementCounter);
copyimg.setAttribute("style", "position: fixed; top: " + (y - 50) + "px; left:" + (x - 50) + "px;");
copyimg.setAttribute('draggable', true);
copyimg.setAttribute('ondragstart', "drag(event)");
console.log("Nova imagem ", elementCounter);
}
}
#conteudo {
width: 250px;
height: 250px;
float: left;
background-color: #ff1;
display: initial;
margin: auto;
z-index: 6;
overflow: hidden;
}
<img id="drag1" width=50px height=50px src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)" alt="" />
<div id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>