Question

正如它现在所处，每个徽标都将进入框中，但只有第一个进入框中才会显示是否放置了多个徽标。有没有办法要么（a）只允许一个徽标进入框中，杀死其他人被丢弃的能力，或者（b）在第一个徽标进入框后，如果有不同的徽标掉入其中，第一个徽标被第二个（或第三个或第四个等）替换，选项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

为了澄清，当放置多个徽标时，所有徽标/图像都会显示。但是，目标框的高度仅为70像素，因此看起来图像不在其中。

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

最后一点，默认情况下，图像和链接是可拖动的，因此无需添加可拖动属性。

希望这有帮助！

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>

HTML5 API中只有一个徽标＆＃34;拖放＆＃34;框

1 个答案: