jQuery Sortable – 限制列表中的项目数

我有一个日程表我正在使用jQuery Sortable进行编辑。

每天都是UL,每个活动都是LI。

我的jQuery是:

$("#colSun, #colMon, #colTue, #colWed, #colThu").sortable({ connectWith: '.timePieces', items: 'li:not(.lith)' }).disableSelection(); 

使所有LI可以排序,除了具有“lith”类(日期名称)的那些。 用户可以每天拖动一个事件,或者通过单击按钮添加新事件,该按钮会将新的可拖动事件(LI)附加到第一个UL(星期日)。

我想让每一天只接受10个活动。 我该怎么做呢?

提前致谢!

  • 演示: http //so.lucafilosofi.com/jquery-sortable-limit-number-of-items-in-list
 $(function() { $(".sortables").sortable({ connectWith: '.connectedSortable', //receive: This event is triggered when a //connected sortable list has received an item from another list. receive: function(event, ui) { // so if > 10 if ($(this).children().length > 10) { //ui.sender: will cancel the change. //Useful in the 'receive' callback. $(ui.sender).sortable('cancel'); } } }).disableSelection(); }); 

要在每次尝试将新项目拖动到特定列表(动态)时触发该函数,您需要使用on()而不是receive:方法。

http://jqueryui.com/demos/sortable/#event-receive

 $(function() { $( "#day1, #day2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); $( "#day1" ).on( "sortreceive", function(event, ui) { if($("#day1 li").length > 10){ $(ui.sender).sortable('cancel'); } }); });