цикл только для последнего элемента - PullRequest
Новая
       7

цикл только для последнего элемента

0 голосов
/ 29 ноября 2018

Я работаю над простым перетаскиванием, которое проверяет, все ли элементы перетаскивания находятся в правильных зонах перетаскивания.Вещи будут перетасованы, но, по сути, я смотрел на то, как это делается, чтобы каждая зона удаления проверяла, содержит ли она «перетаскивание» + соответствующий массив # (т. Е. Первый элемент массива drag0 находится внутри первого элемента массива [0]drop zone).

Однако он действительно работает только для последнего элемента (вы можете просто правильно получить последний элемент и получите правильный ответ).Я видел варианты для его обертывания в функции или использования throw / catch, но, похоже, ничего не работает.

класс элементов - перетаскиваемые элементы, 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 элемента массива.

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 29 ноября 2018

Способ сделать это - начать с предположения, что все хорошо, а затем, если вы найдете что-то нехорошее, измените его.Посмотрите, как я изменил ваш код, чтобы изначально установить для 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;                
            }
    }
}
...