不能計算丟棄的項目

我想使用jQuery UI將項目從一個區域移動到另一個區域。當一個箱子從左邊的區域移動並落在黃色的區域時，我計算剩餘的數量並顯示進度條。不能計算丟棄的項目

出於某種原因，第一次拖動是計數，但不是以下 - 爲什麼？

我試着用length數：

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

來源

2011-12-09 santa

首先我注意到的是'語法錯誤 [Break On This Error] <！DOCTYPE HTML PUBLIC「 - // W3C // DTD HTML 4.01 Transitional // EN」>'errors。確保你的''聲明之前沒有字符（甚至是空格）。 – Jasper

$("#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">&nbsp; 
    <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。

來源

2011-12-09 17:39:28 Galled

我很抱歉。是的，你的代碼運行良好。我加了兩條線，但意外地離開了舊的計數線。刪除它，它現在工作很好。事實上，我減少了代碼，它仍然很棒！ – santa

我相信這段代碼是問題：

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

來源

2011-12-09 17:38:03 Jasper

我在之前修好了空格謝謝你讓我知道。我相信我需要保留.ajax函數，因爲它會發布存儲在我的數據庫中的座標。我沒有寫這個函數，但我確信那就是如此。也許它需要重新編寫，以糾正它有什麼問題... – santa

這是因爲當拖動#launchpad .card項目時，它只在其他表格單元格中可見，而在其他表格單元格中並不物理（就DOM而言）。注意行227

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

這將始終爲5，因爲節點永遠不會移動。這是第一次，因爲你認爲轉移是成功的，只是減少這個數字給你4或20％。

一種可能的解決方案是簡單地從#launchpad移動後刪除該節點並將其追加到另一節點以外的#launchpad或可能增加一個類移動節點和改變上述代碼

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

來源

2011-12-09 17:41:40

不能計算丟棄的項目

回答

相關問題