Bom dia!!
Estou precisando de uma ajuda em JScript.
Fiz um código de Drag and Drop onde coloco um gif dentro da div conteudo e posso move-lo livremente. Só não estou conseguindo fazer o seguinte:
Ao tentar dropar um gif próximo a um item já dropado na div conteudo, o gif empurrar o item dropado.(Atualmente, o item some quando tento colocar na imagem já dropada).
Podem me ajudar?? :(
Segue o código como exemplo:
var elementCounter = 0; // to assign ids to dropped element.
//Drag'n Drop functions
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 {
alert("Nova 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)");
}
}
#conteudo{
width:500px;
height:500px;
float:left;
background-color:#ff1;
display: initial;
margin: auto;
z-index: 6;
overflow: hidden;
}
<html>
<head>
</head>
<body>
<img id="drag1" width="70" src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)" alt="" />
<img id="drag1" width="70" src="https://orig00.deviantart.net/0772/f/2015/291/2/9/29820d36256689bdeae12f344e4f0b7a-d9djrwh.gif" draggable="true" ondragstart="drag(event)" alt="" />
<img id="drag1" width="70" 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>
</body>
</html>