jquery各功能及拖放jqueryui

Question

为什么当我拖放 2 "Android" 时，#docs 中有 3 "i want one li for each android inside #dz"？和 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

因为你add"i want one li for each android inside #dz"

When u already have 1 "Android" in #dz already 1 "i want one li for each android inside #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>");
      });
    }

Answer 2

是因为你在使用$each函数循环遍历$("#dz .android")。

第一个 li 元素出现，因为只有一个 .android 可以循环。

在第二次尝试时，第一个 li 仍然存在 而您已将另一个拖过来。 $("#dz .android").

中现在有两个

因此，每个循环都会触发两次，从而创建另外两个 li。因此，现在有 3 个列表元素。

在第三个可拖动事件中，创建了 3 个 li，并将其添加到现有的 3 个中。因此总共有 6 个。

jquery各功能及拖放jqueryui

jquery each function and drag and drop jquery ui

javascript

jquery

jquery-ui-draggable