Como desativar a classificação com jQueryUI classificável?

Question

Eu implementei a lista classificável jQueryUI e funciona muito bem.Em algum momento, desejo desativar a classificação adicional e manter a ordem dos itens como está, sem que o usuário possa alterá-la.

Ele tentou algo assim:

$('.sortable').sortable('disable'); 

e isto:

$('.sortable').each(function() { $(this).sortable('disable'); });

e:

$('.sortable').disable(); 

e:

$('.sortable').cancel(); 

e várias combinações de tudo isso.Tudo sem sucesso.

Alguém pode dizer ne O caminho certo™ para fazer isso?

Atualizar: Estou usando jQuery 1.3.2 e jQueryUI 1.7.2.Um possível problema pode ser que eu tenho duas listas classificáveis ​​independentes na página, então tenho classes sortable1 e sortable2.Na verdade estou fazendo:

$('.sortable2').sortable('disable'); 

Atualização2: o problema foi eu usar .sortable em vez de #sortable.Tudo funciona bem agora.

Answer 1

A primeira forma é o exemplo dado no documentação.Acabei de testá-lo com um de meus próprios projetos e funciona bem.Quais versões do jQuery e jQuery UI você está usando?Eu tenho 1.3.2 e 1.7.2 respectivamente.

Answer 2

$(ui.sender).sortable( "disable" )

Answer 3

Eu estava no processo de depuração:

1. clique para tornar classificável
2. terminar (desativar classificável)
3. clique para tornar classificável novamente não funcionou
4. solução/solução alternativa:definir a opção desabilitada como falsa explicitamente

http://plnkr.co/edit/uX6cNNiYoejYqwQicEhg?p=preview

  function sortableEnable() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).sortable( "option", "disabled", false );
    // ^^^ this is required otherwise re-enabling sortable will not work!
    $( "#sortable" ).disableSelection();
    return false;
  }
  function sortableDisable() {
    $( "#sortable" ).sortable("disable");
    return false;
  }

Espero que ajude.

Answer 4

Obrigado Michal

Fiz uma versão para listas que podem ser classificáveis ​​ou editáveis.

Muito útil para mim, pelo menos!

    function sortableEnable() {
        $( "ul" ).sortable();
        $( "ul" ).sortable( "option", "disabled", false );
        $( "li" ).attr("contentEditable","false");
        $( "li" ).css("cursor","move");
        return false;
    }

  function sortableDisable() {
        $( "ul" ).sortable("disable");
        $( "li" ).attr("contentEditable","true");
        $( "li" ).css("cursor","default");
        return false;
    }

    $(function() {
        sortableEnable();
    });

Answer 5

Embora as postagens sugeridas antes de mim tenham sido úteis, elas não resolveram o que eu estava tentando alcançar.Eu queria ativar e desativar a classificação em várias áreas e adicionar a capacidade de tornar o conteúdo selecionável novamente.

Aqui está o código que usei:

function AddSortable() {

    $("ul").sortable({
        connectWith: "ul",
        disabled: false
    }).disableSelection();  

    return false;
};

function RemoveSortable(){

    $("ul").sortable({ 
        disabled: true 
    }).enableSelection();   

    return false;
}

Answer 6

$( ".selector" ).sortable( "disable" );

de http://api.jqueryui.com/sortable/#option-disabled

Answer 7

Desabilitar sortable() você pode usar

$(".sortable").sortable("disable");

Para ativar/desativar clicando em um botão com id toggleButton

$('#toggleButton').click(function() {
    //check if sortable() is enabled and change and change state accordingly
  // Getter
  var disabled = $(".sortable").sortable( "option", "disabled" );
  if (disabled) {
    $(".sortable").sortable( "enable" );
  }
  else {
    $(".sortable").sortable("disable");
  }
});

Answer 8

Se você deseja desabilitar todos os classificáveis ​​​​(conforme necessário), você pode usar a classe classificável 'ui-sortable' como seletor.

por exemplo

$(".ui-sortable").sortable("enable");
$(".ui-sortable").sortable("disable");