如何通过拖动另一个图像来更改图像？答案

【问题标题】：How to change an image by dragging another one towards it?如何通过拖动另一个图像来更改图像？
【发布时间】：2017-06-26 21:29:55
【问题描述】：

所以我试图通过将图片 B 拖到图片 A 上来将图片 B 更改为图片 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”。）

谢谢。

【问题讨论】：

按 F12 时控制台出现什么错误？
加载资源失败：图像/未定义服务器响应状态为 404（未找到）
这意味着playerImg1 不是一个有效的图像:)
检查您的路径或仔细检查playerImg1 和playerImg2 是否有效。
但是 playerImg1 是有效的，但另一个实际上没有

标签： javascript image function draggable

【解决方案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>

【讨论】：