Question

我正在尝试使用jQuery UI将项目从一个区域移动到另一个区域。当一个方框从左侧区域移动并掉入黄色区域时，我会计算剩余时间并显示进度条。

出于某种原因，第一次阻力计算但不是以下 - 为什么？

我尝试使用length计算：

$("#launchPad .card").length;

Answer 1

$("#launchPad .card").length计算div.card内的所有td#launchPad，因此初始数字为5.但是当您拖动div.card时，您只会更改元素的位置但仍然是在#launchPad内，所以你的本地变量currentCount也是5。

您可以添加一个类来标识drop事件中已删除的对象。你可以尝试这样的事情：

$("#dropZone").bind( "drop", function(event, ui) {

    $(ui.draggable).addClass('dropped');
    var currentCount = $("#launchPad .card:not(.dropped)").length;

修改

我的意思是你的#launchPad中有下一个DOM：

<td id="launchPad" class="ui-droppable">  <div id="CARD2674" class="card ui-draggable" style="position: relative; ">Task 2</div> <div id="CARD2677" class="card ui-draggable" style="position: relative; ">Task 5</div> <div id="CARD2675" class="card ui-draggable" style="position: relative; ">Task 3</div> <div id="CARD2673" class="card ui-draggable" style="position: relative; ">Task 1</div> <div id="CARD2676" class="card ui-draggable" style="position: relative; ">Task 4</div> </td>

然后，对于jQuery，您的div.card始终位于#launchPad内，因此$("#launchPad .card").length始终返回5.

我放了demo。

Answer 2

我相信这段代码是个问题：

    $.ajax({
        url: "uxowBCc",
        type: "POST",  
        data : "saveCard=33&idCard="+idCard+"&x="+x+"&y="+y,
        dataType: "script",
         success: function(data){
            eval( data);
           } 
        });

期待JavaScript作为响应，但正在获取页面的HTML结构。

这是存储在data变量中的内容：

<!-- It seems like you have a couple lines of nothing up here that shouldn't be -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <link rel="stylesheet" type="text/css" href="/css/style.css">

<link rel="stylesheet" type="text/css" href="/css/testStyle.css">

<link rel="STYLESHEET" type="text/css" href="/jq/UI/css/blitzer/uimin.css">

<script type="text/javascript" src="/jq/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="/jq/jquery-ui.min.js"></script>console.info("id: 299");console.info("2674    299    43    53");

</body>

</html>

Answer 3

这是因为当拖动#launchpad .card项时，它仅在其他表格单元格中明显可见，而在其他表格单元格中则不是物理上（就DOM而言）。注意第227行

var currentCount = $("#launchPad .card").length;

这将始终为5，因为节点永远不会移动。它是第一次工作，因为你认为转移是成功的，只是递减这个数字给你4或20％。

一种可能的解决方案是在移动后从#launchpad中删除节点并将其附加到#launchpad之外的另一个节点，或者可以将类添加到移动的节点并将上述代码更改为

var currentCount = $("#launchPad .card:not(.moved)").length;

无法计算丢弃的物品

3 个答案: