Remove the position. Pure Javascript / HTML5

Question

I am currently doing my last project that needs to be developed on the Internet. I am currently developing to drag an image into a div and make a copy inside it in the position that I dropped. I manage to get the clientX and clientY coordinates, but I can’t refuse these coordinates. Any ideas on how to dump it using Javascript and HTML5?

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {

   ev.preventDefault();
   window.alert( ev.clientX + ',' + ev.clientY);
   var data = ev.dataTransfer.getData("text");
   var nodeCopy = document.getElementById(data).cloneNode(true);
   ev.target.appendChild(nodeCopy);
   ev.stopPropagation();
   return false;
   
   
}

#div1 {
  
  width:500px;height:500px;padding:10px;border:5px solid #aaaaaa;float:left;

}

	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event) " > Drop here </div>

							<img id="drag1" src="images/shoe.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">
							<img id="drag2" src="images/LZK-Logo.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100">

Run codeHide result

div1 is the place where I want to reset my drag1 and drag2. I just could not fix the problem with the position. Any ideas?.

Answer 1

You just need to set the position of your copy node.

var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.setAttribute("style","position:absolute; top:" + ev.clientY + "px; left:" + ev.clientX + "px;");
ev.target.appendChild(nodeCopy);

, , .