Comment désactiver le tri avec jQueryUI sortable ?

Question

J'ai mis en œuvre la liste triable de jQueryUI et cela fonctionne très bien. À un moment donné, je souhaite désactiver le tri et garder l'ordre des éléments tel quel, sans que l'utilisateur puisse le modifier.

Il a essayé quelque chose comme ça :

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

et ceci :

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

et :

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

et :

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

et diverses combinaisons de tout cela. Tout cela sans succès.

Quelqu'un peut-il me dire Le bon chemin ™ de le faire ?

Mise à jour : J'utilise jQuery 1.3.2 et jQueryUI 1.7.2. Un problème possible pourrait être que j'ai deux listes triables indépendantes sur la page, donc j'ai les classes sortable1 et sortable2. En fait, c'est ce que je fais :

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

Mise à jour2 : Le problème était que j'utilisais .sortable au lieu de #sortable. Tout fonctionne bien maintenant.

Answer 1

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

Answer 2

J'étais en train de déboguer :

1. cliquez pour rendre triable
2. finition (désactivable par triage)
3. cliquez pour rendre le tri à nouveau possible n'a pas fonctionné
4. solution / contournement : mettre l'option désactivée à false explicitement

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

J'espère que cela vous aidera.

Answer 3

Merci, Michal.

J'ai fait une version pour les listes qui peuvent être soit triées soit modifiées.

Très utile pour moi en tout cas !

    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 4

Bien que les postes suggérés avant moi aient été utiles, ils n'ont pas résolu ce que j'essayais d'obtenir. Je voulais activer et désactiver le tri sur plusieurs zones et ajouter la possibilité de rendre le contenu sélectionnable à nouveau.

Voici le code que j'ai utilisé :

function AddSortable() {

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

    return false;
};

function RemoveSortable(){

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

    return false;
}

Answer 5

Si vous voulez désactiver tous les éléments triables (comme j'en avais besoin), vous pouvez utiliser la classe d'éléments triables "ui-sortable" comme sélecteur.

Par exemple

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