JS: перетащите изображение на другое изображение

Question

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

Но всякий раз, когда я пытаюсь это сделать, первое изображение исчезает. Есть предложения?

<script>
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");
  ev.target.appendChild(document.getElementById(data));
}

</script>

Answer 1

Исчезает, потому что вы используете ev.target.appendChild(document.getElementById(data));.

Каждый элемент может существовать в DOM только в одном экземпляре. Делая appendChild для существующего элемента, вы извлекаете его из того места, где он находится сейчас. Если вы хотите скопировать элемент - вам нужно сделать это явно, например, с помощью метода cloneNode.

ev.target.appendChild(document.getElementById(data).cloneNode());