Jquery ui 限制拖放面板中的最大元素数

我的网站上有一个可排序的面板（jqueryui），但需要将每列中的元素数量限制在最多12个

我试过一些方法，但似乎无法奏效。我需要看看“I”是12还是更大，如果是的话，不要更新，但我似乎做不到

有人有什么建议或者能帮我找到正确的方法吗

jQuery在下面

function updateWidgetData(){
    var items=[];
    $('.column').each(function(){
        var columnId=$(this).attr('id');
        $('.dragbox', this).each(function(i){
            var collapsed=0;
            if($(this).find('.dragbox-content').css('display')=="none")
                collapsed=1;
            var item={
                id: $(this).attr('ID'),
                collapsed: collapsed,
                order : i,
                column: columnId
            };
            items.push(item);
        });
    });
    var sortorder={ items: items };

    //Pass sortorder variable to server using ajax to save state

    $.post('includes/updatePanels.php', 'data='+$.toJSON(sortorder), function(response){
        if(response=="success")
            $("#console").html('<div class="success">Your preferences have been saved</div>').hide().fadeIn(1000);
        setTimeout(function(){
            $('#console').fadeOut(1000);
        }, 2000);
    });
}

函数updateWidgetData（）{
var项目=[]；
$（'.column'）。每个（函数（）{
var columnId=$（this.attr（'id'）；
$（'.dragbox'，this）.each（函数（i）{
var=0；
if（$（this）.find（'.dragbox content'）.css（'display'）==“none”）
塌陷=1；
变量项={
id:$（this.attr（'id'），
崩溃了,崩溃了,，
命令:我,，
列：列ID
};
项目。推送（项目）；
});
});
var sortorder={items:items}；
//使用ajax将sortorder变量传递给服务器以保存状态
$.post（'includes/updatePanels.php'，'data='+$.toJSON（sortorder），函数（response）{
如果（响应=“成功”）
$（“#控制台”）.html（'您的首选项已保存'）.hide（）.fadeIn（1000）；
setTimeout（函数（）{
$（'控制台'）.fadeOut（1000）；
}, 2000);
});
}

Sortables 对于连接的排序表，解决方案是在开始拖动时统计每个排序表中的元素，并禁用具有最大允许元素数的元素。我们需要排除当前的可排序表，这样我们就可以对其中的项目重新排序，并允许拖动当前元素

这里的问题是，如果我们对任何可排序的事件执行上述操作，已经太晚了，禁用它们不会产生任何效果。解决方案是将检查绑定到项目本身的mousedown事件，该事件将在可排序表获得任何控制之前触发。我们还需要在拖动停止时重新启用所有排序表

看看这个例子，使用带有

项目的
排序表，每个排序表中的最大项目数为3：

可拖放
理论很简单，解决方案有点棘手，jQueryUI中确实应该有一个适当的选项来取消对drop的操作。如果有，但我错过了什么，请让我知道

无论如何，下面是如何检查drop事件中的最大计数（本例中最多4个）：

看看这把小提琴的作用：
我在答案中添加了排序表，这就是实际问题所在。：）
$('.sort').sortable({
    revert: 'invalid',
    connectWith: '.sort',
    stop: function(){
        // Enable all sortables
        $('.sort').each(function(){
            $(this).sortable('enable');
        });
    }
});

$('.sort li').mousedown(function(){
    // Check number of elements already in each sortable
    $('.sort').not($(this).parent()).each(function(){
        var $this = $(this);

        if($this.find('li').length >= 3){
            $this.sortable('disable');
        } else {
            $this.sortable('enable');
        }
    });
})

$('.drag').draggable({
    revert: 'invalid',
    stop: function(){
        // Make it properly draggable again in case it was cancelled
        $(this).draggable('option','revert','invalid');
    }
});

$('.drop').droppable({
    drop: function(event,ui){
        var $this = $(this);

        // Check number of elements already in
        if($this.find('.drag').length >= 4){
            // Cancel drag operation (make it always revert)
            ui.draggable.draggable('option','revert',true);
            return;
        }

        // Put dragged item into container
        ui.draggable.appendTo($this).css({
            top: '0px',
            left: '0px'
        });

        // Do whatever you want with ui.draggable, which is a valid dropped object
    }
});