jQuery：可拖动的计数器（再次！）答案

【问题标题】：jQuery: Counter for draggables (again!)jQuery：可拖动的计数器（再次！）
【发布时间】：2015-06-18 22:19:12
【问题描述】：

这是帖子的后续：

JQuery Drag and Drop Count Content of Drop Area?

我对编程很陌生，所以对一个无聊的问题表示歉意。我正在尝试计算放置在可放置对象中的可拖动元素的数量。与其将计数变量初始化为 0 并在每次可拖动的可拖放区域中下降时增加/减少计数，我正在尝试（可能）不太麻烦的策略，即尝试计算可放置的药丸总数。我试过“.count()”、“.length”但没有成功......这是代码。有什么建议吗？

<!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>

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案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/

也就是说，我会查看以前的答案，使用类可能会简化很多事情。

【讨论】：

您好 Julien，感谢您的详细解释。这太好了，你的建议就像发条一样。
你好，朱利安。我在上面的代码中注意到一些奇怪的东西：如果你第一次拖动一条可拖动的鱼，你“向上”这样做一切都很好。然而，如果你第一次拖动一条鱼，你将它向下拖动并放在屏幕的白色区域的任何地方，然后鱼“跳”出屏幕，到最底部。我正在为此苦苦挣扎：你知道如何解决这个问题吗？
这个例子主要是回答你的计数问题。但你是对的，它没有完全工作，原因有很多。您能否准确定位您正在努力解决的问题，并可能在另一个问题中描述它。还有很多东西需要调整。
嗨，朱利安，谢谢。我在这里发布了新问题和sn-p。 stackoverflow.com/questions/36461021/…
您好 Julien 等人，我已在后续跟进中发布了该问题的解决方案（请参阅下面的链接）。该解决方案令人满意且简单，并且使用原生 HTML5 而不是 jQuery。 stackoverflow.com/questions/36461021/…

【解决方案2】：

可能没有太大帮助，但这里有一个示例，说明如何将类添加到已放置在可放置对象上的对象。然后，您可以使用 jQuery 选择器根据该类计算它们：

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

<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>

【讨论】：