jQuery UIを使用してアイテムをあるエリアから別のエリアに移動しようとしています。左の領域からボックスを移動して黄色の領域にドロップすると、残りの数がカウントされ、プログレスバーが表示されます。落としたアイテムをカウントできません
何らかの理由で最初のドラッグがカウントされますが、次のようにはカウントされません - なぜですか？
私はlengthを使用してカウントしてみました：
$("#launchPad .card").length;
$("#launchPad .card").lengthはtd#launchPad内のすべてのdiv.cardをカウントしているので、最初の数は5です。しかし、あなたはdiv.cardをドラッグするとあなただけの要素の位置を変更しますまだ#launchPadの内部にあるので、ローカル変数currentCountも5です。
dropイベントでドロップされたオブジェクトを識別するクラスを追加します。次に、jQueryのためのあなたのdiv.cardが#launchPadの内側に常に
<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>
：
$("#dropZone").bind("drop", function(event, ui) {
$(ui.draggable).addClass('dropped');
var currentCount = $("#launchPad .card:not(.dropped)").length;
EDIT：
は、私はあなたがあなたの#launchPadの次のDOMを持っている意味あなたはこのような何かを試すことができますなので$("#launchPad .card").lengthは常に5を返します。
I demoを入れてください。
すみません。はい、あなたのコードはうまくいきました。私は両方の行を追加しましたが、誤って古いカウント行を残しました。それを削除し、それは今素晴らしいです。実際、私はコードを整理しても、それはまだ素晴らしいです！ – 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>
私は間隔を固定しました
#launchpad .cardアイテムがドラッグされると、それは他の表のセルで目に見えるだけで、物理的に（DOMに関する限り）他の表のセルでは表示されないからです。通知行227
var currentCount = $("#launchPad .card").length;
ノードは決して移動しないので、これは常に5です。転送が成功したと仮定してこの数値を4〜20％減らすだけで、初めての動作です。
可能な解決策は、単に移動後#launchpadからノードを削除し、#launchpadの外に別のノードに追加し、または多分移動ノードにクラスを追加し、最初
var currentCount = $("#launchPad .card:not(.moved)").length;
に上記のコードを変更します私が気づいたのは、構文エラー [このエラーでブレーク] <！DOCTYPE HTML PUBLIC " - // W3C // DTD HTML 4.01 Transitional // EN">エラーです。あなたの ''宣言の前に文字（スペースも含む）がないことを確認してください。 – Jasper