Почему мой оператор if возвращает больше 1, когда выбран только один элемент?

Question

Почему моя «более 1 система» отображается только с одной .system:

, как вы можете видеть в codepen, когда я перетаскиваю 1 class="systeme" в #dz, «более 1система"появляется, но не должна, потому что это не

$("#dz").find(".systeme").length >= 1

, а

$("#dz").find(".systeme").length > 1

$("#dz").droppable({
    accept: ".systeme",
    drop: function(e, ui) {
         $(ui.draggable).clone().appendTo($("#dz"));
         if ($("#dz").find(".systeme").length > 1) {
             $("#docs").html("<li>more than 1 system</li>");
         }
    }
});

codepen

Thks

Answer 1

Я думаю, вы бы хотели, чтобы «более 1 системы» появлялись более одного раза, если это так, измените

$("#docs").html("<li>more than 1 system</li>");

от

var li=document.createElement("LI");
li.innerHTML="more than 1 system";
$("#docs").append(li);

Я исправляю, то, что вы ищете, находится в условном

change

if ($("#dz").find(".systeme").length > 1)

if ($("#dz").find(".systeme").length - 1 > 1)

Другое

if ($("#dz").find(".systeme").length > 1) {
   $("#docs").html("<li>more than 1 system</li>");
}

от

setTimeout(function(){
    if ($("#dz").find(".systeme").length > 1) {
        $("#docs").html("<li>more than 1 system</li>");
    }
},1000);

Answer 2

Из-за этого условия: if ($("#dz").find(".systeme").length > 1)

если вы измените эту часть, вы можете добавить столько, сколько хотите, играя с условием элемента длины.

проверьте мой пример.пожалуйста, откройте полную страницу

$("#dz").droppable({
                accept: ".systeme",
                drop: function(e, ui) {

                    $(ui.draggable).clone().appendTo($("#dz"));
                    $(ui.draggable).clone().appendTo($("#docs"));

                }
            });

$(function() {

  $(".systeme").draggable({
    appendTo: '#dz',
    cursor: 'move',
    revertDuration: 400,
    revert: 'invalid',
    helper: 'clone'
  });

  $("#dz").droppable({
    accept: ".systeme",
    drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      $(ui.draggable).clone().appendTo($("#docs"));
      if ($("#dz").find(".systeme").length > 3) {
        $("#docs").html("<li>more than 1 system</li>");
      }
    }
  });

});

.num {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

#add {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.colonne {
  float: left;
  width: 45%;
  padding: 2%;
}

.colonnes:after {
  content: "";
  display: table;
  clear: both;
}

ul {
  padding: 10px;
  border-style: solid;
}

li {
  list-style-type: none;
  padding: 8px;
  margin: 8px;
  border-style: dotted;
  width: 300px
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="colonnes">
  <div class="colonne" id="colonne G">
    <h2>systèmes</h2>
    <ul>
      <li class="systeme visioimt">Terminal de Visio local</li>
      <li class="systeme pc">PC</li>
      <li class="systeme tel">Téléphone</li>
      <li class="systeme android">Android</li>
      <li class="systeme visioext">Terminal de Visio Exterieur</li>
      <li class="systeme skype">Skype</li>
    </ul>
  </div>

  <div class="colonne" id="colonne D">
    <h2>sites</h2>
    <ul id="dz">
      <li id="add">+</li>
    </ul>
  </div>

  <br>

</div>
<div>
  <h2>docs</h2>
  <ul id="docs">
  </ul>
</div>