1

Estou trabalhando com o sortable do jQuery UI, porém, não estou conseguindo ativar/desativar o drop para cada ul com 4 li (com 4 desabilita, com menos habilita, sempre permitindo mover o conteudo da ul para outra ).

Meu js do sortable ta assim:

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"));
        }
    });
}

Na função atualizaDados() ele verifica se já tem os 4 registros para saber se pode as posições dos itens no BD, porem, não sei como fazer para que o ul não aceite o drop se já tiver os 4 itens. Esta comentada a linha que devia fazer o trabalho mais não funcionou!

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;
    }
}

Como posso resolver isso ?

1 Resposta 1

1

Você precisa verificar no momento da criação e após o update se a ul contém 4 ou mais li, e desabilitar o sortable, exemplo:

Exemplo: 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) necessário para não contar o li de destino que o jQuery UI adiciona no momento do sortable

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .