Question

这是帖子的后续内容：

JQuery Drag and Drop Count Content of Drop Area?

我对编程很新，所以为一个枯燥的问题道歉。我试图计算掉落在一个droppable中的可拖动元素的数量。不是将计数变量初始化为0并且每次可拖动区域中的可拖动下降时增加/减少计数，我尝试（可能）不那么麻烦的策略尝试计算droppable中的药丸总数。我已尝试使用＆＃34; .count（）＆＃34;，＆＃34; .length＆＃34;但没有成功......这是代码。有什么建议吗？

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>

    <meta charset="utf-8"> 

    <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.ui.touch-punch.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>


    <style>


        .fish  {

            margin:.5em;
            font-size:1.2em;
            position:relative;
            display:inline-block;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border-radius: 50%;

            width: 40px;
            height: 40px; 
            background: #BAB6B2;
            float: left;
            border:.3em  solid #4B027C ;
        }

        .cloth {
            width: 100%;
            height: 210px; 
            border-radius: 15px;
            border: 5% solid rgba(200,0,0,.5);

            background-color:white;
            background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
            linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
            background-size:20px 20px;
        }



    </style>

    <script type="text/javascript">
    $(init);


        function init() {
            var j = 0;
            $("#counter").find("h1").html("You keep: " + j);

            $(".fish").draggable({
                addClasses: true,
            });

            $(".cloth").droppable({
                accept: ".fish",
                tolerance: "fit",
                drop: function( event, ui ) {

                    j = $(".cloth  .fish").length;
                    $("#counter").find("h1").html("You keep: " + j);

                }, 
                out: function(){

                    j = $(" .cloth .fish ").length;
                    $("#counter").find("h1").html("You keep: " + j);

                }

            });



        }
    </script>


</head>
<body>


    <div class="container">


        <div  id= "counter"><h1>You keep: 0</h1></div>


        <div class="cloth" ></div>


        <div class = "row ">
            <div class="fish" ></div>
            <div class="fish" ></div>
            <div class="fish" ></div>
            <div class="fish" ></div>
            <div class="fish" ></div>

        </div>
        <div class ="row ">
        <div class="fish" ></div>
        <div class="fish" ></div>
        <div class="fish" ></div>
        <div class="fish" ></div>
        <div class="fish" ></div>
        </div>



    </div>

 <button type="button" class="btn btn-primary footpage" >Send!</button>

</body>
</html>

Answer 1

您的逻辑有效，但缺少一件事：您从未真正将.fish添加到.cloth div。删除并不意味着将其添加到droppable，这意味着您可以放弃该元素并获取相关事件。如果要添加它们，则必须附加它们。这将意味着修改你的css并添加一些行为以处理相对定位与绝对。此外，out并不意味着您删除元素，这意味着它们会离开droppable区域。所以你也可以更换这个部分。它看起来像这样：

function init() {
    var j = 0;
    $("#counter").find("h1").html("You keep: " + j);

    $(".fish").draggable({
        addClasses: true,
        refreshPositions: true,
        //When you start dragging you append to body mainly to remove
        // from cloth div
        start: function (e, ui) {
            ui.helper.appendTo('body');
        },
        //You move your out logic to stop. So if the element hasn't been added
        // to cloth, it won't be counter
        stop: function (e, ui) {
            j = $(".cloth  .fish").length;
            $("#counter").find("h1").html("You keep: " + j);
        }

    });

    $(".cloth").droppable({
        accept: ".fish",
        tolerance: "fit",
        drop: function (event, ui) {
            //On drop you append fish to the cloth div so it's counted
            $('.cloth').append(ui.helper.css({
                position: 'absolute',
                top: ui.helper.offset().top,
                left: ui.helper.offset().left
            }));
            j = $(".cloth  .fish").length;
            $("#counter").find("h1").html("You keep: " + j);

        },


    });



}

和css：

.ui-draggable-dragging {
    position: absolute;
}

小提琴：https://jsfiddle.net/nL3axfd2/8/

那就是说，我看看以前的答案，与班级合作可能会简化这一切。

Answer 2

可能没有多大帮助，但这里有一个如何向已放置在droppables上的对象添加类的示例。然后，您可以使用jQuery选择器基于该类对它们进行计数：

＆＃13;

    $("#draggable").draggable();
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(event.toElement).addClass("ui-state-highlight")
                              .find("p")
                              .html("Dropped!"); 
        }
    });

＆＃13;

<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
    #draggable {
        width: 100px;
        height: 100px;
        padding: 0.5em;
        float: left;
        margin: 10px 10px 10px 0;
    }
    #droppable {
        width: 150px;
        height: 150px;
        padding: 0.5em;
        float: left;
        margin: 10px;
    }
</style>
<body>
    <div id="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
    <div id="droppable" class="ui-widget-header">
        <p>Drop here</p>
    </div>

＆＃13;

jQuery：draggables的计数器（再次！）

2 个答案: