一旦掉落的物品数量达到一定限度，请避免掉落

我正在使用Jquery UI Draggable。 我试图避免一旦接收到该项目的div达到限制就丢弃物品。 如下所示，这是我的代码。

$( "#grid-list" ).droppable({ over: function(event, ui) { count = 0; $("#grid-list").find("li").each(function () { count++; if(count > $("#grid-list").data("albumlist")){ alert("limit reached"); } }); } }); 

JS小提琴示例： http ： //jsfiddle.net/r1Lnxby9/

Answer 1

编辑，更新

尝试从html删除ondragstart="drag(event)" ， draggable="true" ， drag不会出现在js定义; 设置tolerance:"touch" at .droppable()选项; 用$("> li", this).length替换$("> li", this).length为count ， $("#grid-list").each() ; >= for >如果预期结果是.droppable()元素中最多1元素; over事件中调用event.preventDefault() ， event.stopPropagation()

  $("#list-albuns, #grid-list").sortable({ connectWith: ".connectedSortable" }).disableSelection(); $("#grid-list").droppable({ tolerance: "touch", over: function(event, ui) { if ($("> li", this).length >= $(this).data("albumlist")) { event.preventDefault(); event.stopPropagation(); alert("limit"); } } }); 

 ul li { display: inline-block; list-style: none; } 

   
 
   
 
   
 
   
 
   
 
   
 
   
 
Drop Here: