JQuery каждой функции и перетащите JQuery UI

Question

почему, когда я перетаскиваю 2 "Android", появляются 3 "я хочу один li для каждого андроида внутри #dz" внутри #docs?и 6, когда я бросаю 3 и т.д ...

    $("#dz").droppable({
        accept: ".systeme",
        drop: function(e, ui) {
            $(ui.draggable).clone().appendTo($("#dz"));
            setTimeout(function(){

                $("#dz .android").each(function() {
                    $("#docs").append("<li>i want one li for each android inside #dz</li>");
                }, 10);
              });
        }

https://codepen.io/Cyril29/pen/dybLaam

Спасибо!

Answer 1

Это потому, что вы используете функцию $ each для циклического просмотра $("#dz .android").

Один элемент li появляется первым, потому что существует только один .android для цикла.

Во второй попытке первая li все еще существует , и вы перетаскиваете другую.Два теперь существуют в $("#dz .android").

Итак, каждый цикл запускается дважды, что создает еще два li с.Таким образом, теперь есть 3 элемента списка.

В третьем перетаскиваемом событии создаются 3 li s, которые добавляются к существующим 3. Следовательно, всего 6.

Answer 2

Потому что вы добавьте "Я хочу один li для каждого андроида внутри #dz"

Когда у вас уже есть 1 "Android" в #dz уже 1 «Я хочу один li для каждого андроида внутри #dz»

Когда вы отпускаете второй «Android» $("#dz .android").each(), звонящий 2 раза (уже 1 добавление 2 новых)

Решение 1:

drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      setTimeout(function(){
        $("#docs").empty() // remove all elements in #docs 
        $("#dz .android").each(function() {
          $("#docs").append("<li>i want one li for each android inside #dz</li>");
        }, 10);
      });
    }

Решение 2:

drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      setTimeout(function(){
          $("#docs").append("<li>i want one li for each android inside #dz</li>");
      });
    }