html - 只有一个标志进入 HTML5 API "drag and drop"框

Question

就目前而言，每个 Logo 都会放入框中，但如果放置了多个 Logo ，则只会显示第一个放入框中的 Logo 。有没有办法要么(a)只允许一个标志进入盒子，杀死其他人被丢在那里的能力，要么(b)在第一个标志进入盒子后，如果另一个标志被放入其中，第一个 Logo 被第二个(或第三个或第四个等)替换选项 B 将是首选方法。

<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>

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

<img id="drag1" src="pagepics/Avengers_Logo.png" draggable="true"ondragstart="drag(event)" alt="Avengers Logo"  width="200" height="100">
<img id="drag2" src="pagepics/Ghostbusters.png" draggable="true" ondragstart="drag(event)" alt="Ghostbusters Logo"  width="200" height="100">
<img id="drag3" src="pagepics/ResidentEvil.png" draggable="true" ondragstart="drag(event)" alt="Resident Evil Logo" width="200" height="100">

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
 }

Answer 1

澄清一下，当放置多个 Logo 时，所有 Logo /图像都会显示。然而，目标框的高度只有 70px，因此看起来图像不在其中。

也就是说，以下解决方案将在您添加新 Logo 时替换 Logo 。

最后一点，图片和链接默认是可拖动的，所以不需要添加draggable属性。

希望这对您有所帮助!

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

function drag(event) {
  event.dataTransfer.setData("text/plain", event.target.id);
}

function drop(event) {
  event.preventDefault();
  var src = document.getElementById(event.dataTransfer.getData("text/plain"));
  var srcParent = src.parentNode;
  var itm = event.currentTarget.firstElementChild;

  event.currentTarget.replaceChild(src, itm);
  srcParent.appendChild(itm);
}

#div1 {
  width: 350px;
  height: 100px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  margin: 5px;
}

img {
  margin: 0 5px;
}

.box {
  position: relative;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span></span>
</div>


<div class="box">
  <img id="drag1" src="http://via.placeholder.com/180x100" ondragstart="drag(event)" alt="Avengers Logo">
<div>

<div class="box">
  <img id="drag2" src="http://via.placeholder.com/100x100" ondragstart="drag(event)" alt="Ghostbusters Logo">
</div>

<div class="box">
  <img id="drag3" src="http://via.placeholder.com/120x100" ondragstart="drag(event)" alt="Resident Evil Logo">
</div>