Enable/disable drop in sortable (jquery)?

Question

I’m working with the sortable jQuery UI, however, I am unable to enable/disable the drop for each ul with 4 li (with 4 disabled, with less enabled, always allowing to move the content of ul to another ).

My sortable js ta so:

function ativaSortable()
{
     $('.connected').sortable({
        connectWith: '.connected',
        update: function(event, ui) 
        {
            var nivel = ui.item.parent().parent().attr('id');
            atualizaDados(ui.item.index(), nivel, this.id, $(ui.item).attr("id"));
        }
    });
}

In function atualizaDados() he checks if he already has the 4 records to know if he can the positions of the items in the BD, however, I do not know how to do ul do not accept the drop if you already have all 4 items. This commented the line that should do the job no longer worked!

function atualizaDados(posicao, nivel, linha, id)
{
    var totalLinha = $("#"+nivel+" #"+linha+" li");
    console.log("POSIÇÃO ["+posicao+ "] NIVEL ["+nivel + "] LINHA [" + linha + "] ID ["+id+"]");
    console.log(totalLinha.length);

    if(totalLinha.length<=4)
    {
        // ainda não esta desabilitando quando a linha tem 4 itens.
        //$("#"+nivel+">#"+linha).droppable({ disabled: true } );
        $.ajax({url:"<?php echo $this->Html->url(array('action'=>'atualizaDadosPosicao')); ?>/"+posicao+"/"+nivel+"/"+linha+"/"+id, async:false}).resposeText;
    }
}

How can I fix this ?

Answer 1

You need to check at the time of creation and after the update if a ul contains 4 or more li, and disable the sortable, example:

Example: Jsfiddle

$(function() {
    $( "#sortable1, #sortable2, #sortable3" ).sortable({
      cursor:'move',
      connectWith: ".connectedSortable",
        //função ao criar os sortables
        create : function(){
            //verifica se há 4 ou mais itens
            if($(this).children('li:not(.ui-sortable-placeholder)').length >= 4){
                $(this).sortable("disable"); // desabilita o sortable
                $(this).children('li').addClass('ui-state-disabled'); // add classe disabled
            }
        },
        //função ao fazer o update
        update : function(){
            /*
            * seu código aqui para update na base de dados
            */
             //verifica se há 4 ou mais itens
             if($(this).children('li:not(.ui-sortable-placeholder)').length >= 4){
                $(this).sortable("disable"); // desabilita o sortable
                $(this).children('li').addClass('ui-state-disabled'); // add classe disabled
            }
        },
    }).disableSelection();      
  });

Obs: li:not(.ui-sortable-placeholder) necessary not to count the li of destination that jQuery UI adds at the time of sortable