drag item item w/jQuery

Question

我想寫一個進度指示器代碼來顯示一個任務完成了多少。我正在嘗試使用jQuery UI的拖放功能。需要移動的項目位於左側。當它們在右側的繪圖區域拖動時，計數器需要在放下時更新。它只需要計算移動的物品數量，而不是每個物品移動到網格區域$（「＃grid」）的次數。

我覺得我很接近但還沒有那麼完美。下面是我到目前爲止有：

var startCount = $("#launchPad .card").length; 
var moveFromLaunch = false; 

$(".card").bind("dragstart", function(event, ui) { 
    moveFromLaunch = true; 
}); 

$("#dropZone").bind("drop", function(event, ui) { 
    var currentCount = $("#launchPad .card").length; 
    if (moveFromLaunch) 
     currentCount--; 
    currentCount = startCount - currentCount; 
    moveFromLaunch = false; 
    var progress = Math.floor(currentCount/startCount * 100); 
    $("#progBarRd").width(progress); 
    $('#progBar').attr("title", progress+'%'); 
}); 

Answer 1

您不必將導致#launchPad在元件尺寸縮小的任何代碼。 .card將移動位置，而不是DOM元素父項。

嘗試標記您刪除的項目並計算沒有標記集的已刪除項目數（使用類和jQuery CSS選擇器）。

祝你好運！