Good morning !!
I need help with JScript.
I made a Drag and Drop code where I put a gif inside the content div and I can move it freely. I just can not do the following:
When I try to drop a gif next to an item already dropped in the content div, the gif pushes the dropped item. (Currently, the item disappears when I try to put the already dropped image).
Can you help me?? :(
Follow the code as an example:
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>