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选择器）。

祝你好运！