У меня есть картинка, которая, когда я перетаскиваю ее на красный круг, копирует. Я хочу, чтобы он оставался там, где копируется, а не привязывался к левому верхнему углу

Question

У меня есть изображение, которое, когда я перетаскиваю его на красный круг, копирует. Я хочу, чтобы оно оставалось там, где оно было скопировано, а не привязывалось к верхнему левому углу. Как мне это сделать?

HTML:

CSS:

.box {
   display: block;
   height: 300px;
   width: 300px;
   background-color: red;
}

JavaScript:

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");
   var nodeCopy = document.getElementById(data).cloneNode(true);
   nodeCopy.id = "newId";
   ev.target.appendChild(nodeCopy);
}

Или посмотрите TryIt здесь: https://www.w3schools.com/code/tryit.asp?Filename=GBY2BVYBXUPW

Answer 1

У событий есть переменные, которые вы можете использовать.

В этом примере я использую x и y и позиционирую изображение с абсолютной позицией с помощью этой строки кода

 nodeCopy.setAttribute("style", "position:absolute; left:"+ ev.x +"px;top:"+ ev.y+"px");

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");
  var nodeCopy = document.getElementById(data);
  if (nodeCopy.classList.contains('insideBox')){
    nodeCopy.setAttribute("style", "position:absolute; left:"+ ev.x +"px;top:"+ ev.y+"px;transform:translate(-"+nodeCopy.width/2+"px,-"+nodeCopy.height/2+"px)");
    }
    else{
      nodeCopy=nodeCopy.cloneNode(true)
      nodeCopy.classList.add("insideBox");
      nodeCopy.id = "newId"+Math.random(100);
      nodeCopy.setAttribute("style", "position:absolute; left:"+ ev.x +"px;top:"+ ev.y+"px;transform:translate(-"+nodeCopy.width/2+"px,-"+nodeCopy.height/2+"px)");
      ev.target.appendChild(nodeCopy);
    }

}

*{
  margin:0;
  padding:0;
}    	
.box {
  display: block;
  height: 300px;
  width: 300px;
  background-color: red;
}