javascript - JS拖放中如何设置if..else语句

Question

我想从下面的代码中得到的结果是:1.有三个文本:拖我!，拖我2!，拖我3!2.其中一个文本将被拖到最后一个空框3.demo2会显示拖放文字的文字

但我所做的只会显示“Drag me3!”如何使用 if...else 语句完成 1、2 和 3？

function dragStart(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
  document.getElementById("demo").innerHTML = "Started to drag the p element";
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  document.getElementById("demo").innerHTML = "The p element was dropped";
  var x = document.getElementById("dragtarget1").textContent;
  var y = document.getElementById("dragtarget2").textContent;
  var z = document.getElementById("dragtarget3").textContent;
  document.getElementById("demo2").innerHTML = x;
  document.getElementById("demo2").innerHTML = y;
  document.getElementById("demo2").innerHTML = z;
}

.droptarget {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget1">Drag me!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget2">Drag me2!</p>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" draggable="true" id="dragtarget3">Drag me3!</p>
</div>

<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p>

<p id="demo"></p>
<p id="demo2"></p>

Answer 1

您看到上面列出的行为的原因是您的代码行 var x = document.getElementById("dragtarget").textContent;。这段代码所做的是每次获取具有该特定 ID (dragtarget) 的元素的文本上下文并将其设置为 id=demo2 的内部 HTML 内容。您无需使用特定 ID 搜索特定元素，而是需要使用更动态的解决方案，该解决方案查看 drop() 函数接收的事件对象，以确定要在 中设置的文本>demo2 元素。