Question

我正在进行一个简单的拖放活动，该活动将检查所有拖动项是否在正确的放置区域中。事情将被洗掉，但是本质上，我看待它的方式是每个拖放区检查它是否包含“拖动” +匹配的数组号（即，第一个数组项drag0位于第一个数组项[0]内）拖放区）。

但是，它仅对最后一个项目真正起作用（您可以正确选择最后一个项目，并且会得到正确的答复）。我已经看到了将其包装在函数中或使用throw / catch的选项，但似乎无济于事。

item类是可拖动项，dropzone是可放置区域的类。

function seeResult() {
  var result = document.getElementById("result");
  var drags = document.getElementsByClassName("item");
  var drops = document.getElementsByClassName("dropzone");
  var i;
  for (i = 0; i < drops.length; i++) {
    var num = i;
    if (drops[i].innerHTML.indexOf("drag" + num)) {
      result.style.color = "green";
    } else {
      result.style.color = "red";
    }
  }
};

<div class="item" draggable="true" ondragstart="drag(event)" id="drag0">Drag Item 1</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag1">Drag Item 2</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag2">Drag Item 3</div>
<div class="item" draggable="true" ondragstart="drag(event)" id="drag3">Drag Item 4</div>

<div id="dropZones">
  <div id="dropZone1" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 1</p>
    </div>
  </div>
  <div id="dropZone2" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 2</p>
    </div>
  </div>
  <div id="dropZone3" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 3</p>
    </div>
  </div>
  <div id="dropZone4" class="dropcon">
    <div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div class="dragdesc">
      <p>Drop Description 4</p>
    </div>
  </div>
</div>

<div id="seeResult" onclick="seeResult()">See result!</div>
<div id="result">Result</div>

最后一点要注意的是，它将被添加到一个站点中，内容创建者可以在该站点中添加/删除他们想要的许多拖放项，然后将其吐给最终用户，因此事情必须相当动态，可以不只是使用这4个特定的数组项。

在此先感谢您的帮助！

Answer 1

执行此操作的方法是在一切正常的情况下将其开始，然后，如果发现不良之处，请进行更改。看看我如何将代码更改为将result.style.color最初设置为绿色，然后如果发现不正确的元素，则将其设置为红色并返回。

function seeResult() {
    var result = document.getElementById("result");
    result.style.color = "green";
    var drags = document.getElementsByClassName("item");
    var drops = document.getElementsByClassName("dropzone");
    var i;
    for (i = 0; i < drops.length; i++){
        var num = i;
            if(drops[i].innerHTML.indexOf("drag"+num) == -1){
              result.style.color = "red";
              return;                
            }
    }
}

for循环仅适用于最后一项

1 个答案: