web-dev-qa-db-fra.com

Comment désactiver le tri avec jQueryUI sortable?

J'ai implémenté jQueryUI sortable list et cela fonctionne vraiment bien. À un moment donné, je souhaite désactiver le tri et conserver 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 ça:

$('.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 dire ne Le droit chemin™ 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 indépendantes triables sur la page, donc j'ai des classes sortable1 et sortable2. Je suis en train de faire:

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

Update2: le problème était que j'utilisais .sortable au lieu de #sortable. Tout fonctionne bien maintenant.

jqueryjquery-uijquery-ui-sortable
23
Milan Babuškov

Le premier moyen est l'exemple donné dans le documentation . Je viens de le tester avec l'un de mes propres projets et cela fonctionne bien. Quelles versions de jQuery et de jQuery UI utilisez-vous? J'ai 1.3.2 et 1.7.2 respectivement.

1
shuckster
$(ui.sender).sortable( "disable" )
32
isxaker

J'étais en train de déboguer:

  1. cliquez pour rendre triable
  2. terminer (désactiver le triable)
  3. cliquez pour rendre triable à nouveau n'a pas fonctionné
  4. solution/solution de contournement: définissez l'option désactivée sur 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 pourra aider.

10
Michal Stefanow

Merci Michal

J'ai créé une version pour des listes pouvant être triées ou éditées.

Très utile pour moi au moins!

    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();
    });
4
Chris Glasier

Les messages suggérés avant moi étaient utiles, mais ils n'ont pas résolu ce que j'essayais de faire. 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;
}
2
Andi

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

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

2
isync

Pour désactiver sortable(), vous pouvez utiliser

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

Activer/désactiver en un clic sur un bouton avec l'identifiant 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");
  }
});
1
Rahul Gupta

Si vous souhaitez désactiver tous les objets de tri (comme je devais le faire), vous pouvez utiliser la classe d'outil de tri 'ui-sortable' comme sélecteur.

par exemple

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