Javascript 循环中可拖放区域中的项目计数_Javascript_Jquery_Loops

Javascript 循环中可拖放区域中的项目计数

javascript jquery loops

Javascript 循环中可拖放区域中的项目计数,javascript,jquery,loops,Javascript,Jquery,Loops,我有一个手风琴和一圈可放下的区域。我设法为两个可拖放字段计数项目，但我遇到了计数问题，我需要它分别计算每一行，而不是同时计算两行。我在这里有一个循环，它可以正常工作一行，但当我试图使它循环的问题出现。以及如何在删除项目后减少项目下面是循环代码： <body style="background-color:white;" onload="startTime()"> <h1 class="ui-widget-header">Products</h1>

我有一个手风琴和一圈可放下的区域。我设法为两个可拖放字段计数项目，但我遇到了计数问题，我需要它分别计算每一行，而不是同时计算两行。我在这里有一个循环，它可以正常工作一行，但当我试图使它循环的问题出现。以及如何在删除项目后减少项目

下面是循环代码：

<body style="background-color:white;" onload="startTime()"> 
<h1 class="ui-widget-header">Products</h1>    
<div id="myAccordion">
<h3><a href="#">T-Shirts</a></h3>
    <div>
        <ul>
            <li>Lolcat Shirt</li>
            <li>Cheezeburger Shirt</li>
            <li>Buckit Shirt</li>
        </ul>
    </div>
<h3><a href="#">Bags</a></h3>
    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
<h3><a href="#">Gadgets</a></h3>
    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
<label>
<?php
    $len=2;
    for($y=0;$y<$len;$y++)
    {
        echo "<div class='proc'> <pre>";
        echo "<span> </span><br /></pre>";  
?>
    <div id="procLeader">
        <label>Box1:</label>
        <div class="ui-widget-content">
        <div id="procleader">
            <ol>
                <li class="placeholder" name="procleader">Add here</li>
                <input type="hidden" name="procleader" id="hiddenListInput3" />
            </ol>
        </div>
        </div>
    </div>
    <div id="procChecker">
        <label>Box2:</label>
        <div class="ui-widget-content">
        <div id="procchecker">
            <ol>
                <li class="placeholder" name="procchecker">Add here</li>
                <input type="hidden" name="procchecker" id="hiddenListInput4" />
            </ol>
        </div>
        </div>
    </div>
<?php       
    echo "</div>";                      
    }
?>
</label>
</body>


产品

棒棒糖衬衫
奶酪汉堡衬衫
布基特衬衫


斑马条纹
黑色皮革
鳄鱼皮


iPhone
iPod
iPad

请检查这个代码。其主要思想是在HTML对话框中具有唯一的id
。所以，如果我们在循环中创建DOM，那么不要尝试分配它们id
；而是选择类
。在这里，我添加了两行，并将HTML、JS和CSS中的id
更改为class
：

$（函数（）{
var-itm=[]；
$（“#保存按钮”）。单击（函数（）{
LISTOBJ.saveList（）；
});
$（“我的手风琴”）。手风琴({
高度样式：“内容”，
活动：错误，
可折叠：正确
});
$（“#我的手风琴里”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“.leader ol”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
var zz=ui.draggable.text（）
var xyz=itm.包括（zz）；
如果（xyz==false）{
$（this.find（“.placeholder”）.remove（）；
$（“”）文本（ui.draggable.text（））
//.addClass（“购物车项目”）
.addClass（“dropClass”）
.附于（本）；
//添加到数组
itm.push（zz）；
//添加样式
$（'.ui Dropable'）.find（“li.ui Dragable:contains（'“+zz+”）））.addClass（'breed'）；
var n=$（this）.closest（“div.proc”）.find（“.dropClass”）.length；//在自己的容器中查找项
$（this）.closest（“div.proc”）.find（“span”）.text（“删除的项：“+n+”）；//在自己的容器中设置文本
}否则{
警报（“名称已存在”）；
}
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
$（“.checker ol”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
var zz=ui.draggable.text（）
var xyz=itm.包括（zz）；
如果（xyz==false）{
$（this.find（“.placeholder”）.remove（）；
$（“”）文本（ui.draggable.text（））
//.addClass（“购物车项目”）
.addClass（“dropClass”）
.附于（本）；
//添加到数组
itm.push（zz）；
//添加样式
$（'.ui Dropable'）.find（“li.ui Dragable:contains（'“+zz+”）））.addClass（'breed'）；
var n=$（this）.closest（“div.proc”）.find（“.dropClass”）.length；
$（this）.closest（“div.proc”）.find（“span”）.text（“删除的项：“+n+”）；
}否则{
警报（“名称已存在”）；
}
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
$（this.removeClass（“ui状态默认”）；
}
});
$（“myAccordion ul”）。可下拉({
drop：函数（事件、用户界面）{
$（ui.draggable）.remove（）；
var zz=ui.draggable.text（）
$（'.ui droppable'）.find（“li.ui draggable:contains（“+zz+”）））.removeClass（'breed'）；
var Indexim=itm.indexOf（zz）；
如果（indexItm>-1）{
itm.拼接（indexItm，1）；
}
},
hoverClass:“ui状态悬停”
//接受：'.cart项目'
});
});
每行分开
或每框分开
？您能解释一下输出中的行在哪里吗？@vijayP每一行都是分开的，但两个框都在一起哦，好的..您的意思是说Box1-Box2组合将重复，我们可能会在第页多次看到这一对。我们想显示掉下来的项目：（一些数字）。
每对的文本。请confirm@vijayP是的，非常感谢，所以在处理循环时使用类更好吗？@YevgeniyBagackiy-是的，当然。转到类
并使用jQuery的$。最近的
和$。查找在您的每个块/行内工作。非常感谢您的帮助。如何减少删除后删除的项目数。我怎么能做到？
$(function() {
          var itm = [];
          $("#savebutton").click(function() {
            LISTOBJ.saveList();
          });
          $("#myAccordion").accordion({
            heightStyle: "content",
            active: false,
            collapsible: true
          });
          $("#myAccordion li").draggable({
            appendTo: "body",
            helper: "clone"
          });
          $(".leader ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
              var zz = ui.draggable.text()
              var xyz = itm.includes(zz);
              if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                  //.addClass("cart-item")
                  .addClass('dropClass')
                  .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length; //finding the items within own container
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); //setting the text in own container

              } else {
                alert('Name is Already Exist');
              }

            }
          }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
              $(this).removeClass("ui-state-default");
            }
          });
          $(".checker ol").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function(event, ui) {
              var zz = ui.draggable.text()
              var xyz = itm.includes(zz);
              if (xyz === false) {
                $(this).find(".placeholder").remove();
                $("<li></li>").text(ui.draggable.text())
                  //.addClass("cart-item")
                  .addClass('dropClass')
                  .appendTo(this);

                //add to array
                itm.push(zz);
                //add style
                $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred');
                var n = $(this).closest("div.proc").find(".dropClass").length;
                $(this).closest("div.proc").find("span").text("Items Dropped: " + n + ".");

              } else {
                alert('Name is Already Exist');
              }

            }
          }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
              $(this).removeClass("ui-state-default");
            }
          });
          $("#myAccordion ul").droppable({
            drop: function(event, ui) {
              $(ui.draggable).remove();
              var zz = ui.draggable.text()
              $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred');

              var indexItm = itm.indexOf(zz);
              if (indexItm > -1) {
                itm.splice(indexItm, 1);
              }
            },
            hoverClass: "ui-state-hover"
              //accept: '.cart-item'
          });
        });