드롭 할 수있는 영역 jquery에서 떨어 뜨린 항목을 계산하는 방법

Question

내가 떨어 뜨린 항목에서 떨어 뜨린 항목을 계산할 수 있습니다. 여기에 fiddle입니다. 그래서 내가 필요한 것은 아이템이 드래그 아웃 될 때 카운트를 빼는 것입니다. 스크립트 항목을 끌어서 놓는 데 사용됩니다.

$(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

내가 항목을 끌 경우에도 그 킵가 제대로 계산 것으로 나타났습니다 :

<script> 
$(function() { 
    var itm = []; 
$("#savebutton").click(function() { LISTOBJ.saveList(); }); 
    $("#myAccordion").accordion({ 
    heightStyle: "content", 
    active: false, 
    collapsible: true 
    }); 
    $("#myAccordion li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
    }); 
    $(".leader ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var zz = ui.draggable.text() 
     var xyz = itm.includes(zz); 
     if (xyz === false) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()) 
      //.addClass("cart-item") 
      .addClass('dropClass') 
      .appendTo(this); 

     //add to array 
     itm.push(zz); 
     //add style 
     //$('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
     var n = $(this).closest("div.proc").find(".dropClass").length; 
     $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

     } else { 
     alert('Name is Already Exist'); 
     } 

    } 
    }).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
    }); 
    $(".checker ol").droppable({ 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    accept: ":not(.ui-sortable-helper)", 
    drop: function(event, ui) { 
     var zz = ui.draggable.text() 
     var xyz = itm.includes(zz); 
     if (xyz === false) { 
     $(this).find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()) 
      //.addClass("cart-item") 
      .addClass('dropClass') 
      .appendTo(this); 

     //add to array 
     itm.push(zz); 
     //add style 
     $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
     var n = $(this).closest("div.proc").find(".dropClass").length; 
     $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

     } else { 
     alert('Name is Already Exist'); 
     } 

    } 
    }).sortable({ 
    items: "li:not(.placeholder)", 
    sort: function() { 
     $(this).removeClass("ui-state-default"); 
    } 
    }); 
    $("#myAccordion ul").droppable({ 
    drop: function(event, ui) { 
     $(ui.draggable).remove(); 
     var zz = ui.draggable.text() 
     $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred'); 

     var indexItm = itm.indexOf(zz); 
     if (indexItm > -1) { 
     itm.splice(indexItm, 1); 
     } 
    }, 
    hoverClass: "ui-state-hover" 
     //accept: '.cart-item' 
    }); 
}); 
var LISTOBJ = { 
    saveList: function() { 
     $(".leader").each(function() { 
      var listCSV = []; 
      $(this).find("li").each(function(){ 
       listCSV.push($(this).text()); 
      }); 
      var values = listCSV.join(', '); 
      $(".output").append("<input type='hidden' name='leader[]' value='"+values+"' />"); 
      $("#output").append("<p>"+values+"</p>"); 
       console.debug(listCSV); 
     }); 
    } 
} 
</script> 

그리고 듣지 표시된 항목의 수 : 또한 수를 확인합니다. 드롭 된 영역의 .length을받는 것과 같습니다. 유일한 문제는 text("Items Dropped: " + n + "."); 필드를 업데이트하는 방법입니까?

Answer 1

JQuery Droppable은 카운트 값을 다시 얻을 수있는 일부 요소가 드롭 가능 div에서 벗어 났을 때 알 수있는 이벤트 out(event, ui)을 가지고 있습니다.

JQuery Droppable - out event

나는 항목의 개수가 떨어 표시됩니다 샘플 바이올린을 만들었습니다.

Fiddle

out:function(event, ui){ 
     count= count-1; 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Out!"); 
      $("#count").text(count); 
     } 

희망이 당신의 문제를 해결에 도움이.

-help :