Enable / disable drop in sortable (jquery)?

Navigation
1

I'm working with the sortable of jQuery UI, however, I'm not able to enable / disable drop for every ul with 4 li (with 4 disable, with less enable, always enabling move the content from ul to another).

My sortable js are like this: 

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 the atualizaDados() function it checks if you already have the 4 records to know if the positions of the items in the BD can be, but I do not know how to do so that ul does not accept the drop if you already have all 4 items. This commented the line that should do the most work did not work! 

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 resolve this?

    
asked by anonymous 11.07.2014 / 19:34

1 answer

1

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

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) needed not to count the li target that jQuery UI adds at sortable time     

11.07.2014 / 20:42
How do I control a video from Scroll? How to preview with more than one Ireport file