如何通过将另一个图像拖向它来更改图像？

Question

所以我想通过拖动图片 B 将图片 A 更改为图片 B。我只用了一张图片，但我想让它用多张图片。This image kind of pictures what I want to do.

到目前为止我在 JS 方面的知识：

function movePlayer1() {
    if (document.getElementById("pack")) {
        document.getElementById("spot1").src = "image/" + playerImg1;
    } else {
        document.getElementById("spot1").src = "image/" + playerImg2;
    }
}
document.querySelectorAll("img#spot1")[0].addEventListener("dragover", movePlayer1);

我是 Javascript 的新手，但我已经尝试了多种方法，但不知道该怎么做，所以我希望有人能帮助我解决这个问题。如果我需要提供任何额外信息，请告诉我！

（当我将"playerImg2"拖到document.getElementById（"pack"）上时，它仍然变为"playerImg1"而不是"playerImg2"。）

谢谢。

Answer 1

为可放置区域使用背景图片，
并玩转图像的可拖动性：

const isClass = (cl, el) => el.classList.contains(cl);
const on = (typ, el, cb) => el.addEventListener(typ, cb);
let dragEl;

on("dragover",  document, (e) => e.preventDefault() );
on("dragend",   document, (e) => e.target.style.opacity = 1 );
on("dragstart", document, (e) => {
  dragEl = e.target;
  e.target.style.opacity = 0;
});
on("drop", document, (e) => {
  e.preventDefault();
  if(isClass("dropArea", e.target)) {
    dragEl.remove();
    e.target.append( dragEl );
  }
});

.dropArea {
  display:inline-block; vertical-align:middle;
  width: 57px; height: 87px; margin: 8px;
  background: url('https://i.stack.imgur.com/5nsDs.png') no-repeat 50% 50% / cover;
}
.dropArea.small{
  width:  30px; height: 40px;
}
.dropArea img{
  width: 100%; height: 100%;
  transition: 0.3s;
}

<div class="dropArea"><img src="https://i.stack.imgur.com/sBQ1c.png" draggable="true"></div>
<div class="dropArea"><img src="https://i.stack.imgur.com/kR6MI.png" draggable="true"></div>
<div class="dropArea"><img src="https://i.stack.imgur.com/XSBBq.png" draggable="true"></div>
<div class="dropArea small"></div>
<div class="dropArea small"></div>
<div class="dropArea small"></div>

如何通过将另一个图像拖向它来更改图像？

How to change an image by dragging another one towards it?

javascript

image

function

draggable