Reputation: 61108

How to turn off sorting with jQueryUI sortable?

I have implemented jQueryUI sortable list and it works really nice. At some point in time, I wish to disable further sorting and keep item order as it is, without user being able to change it.

It tried something this:

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

and this:

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

and:

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

and:

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

and various combinations of all that. All without success.

Can anyone tell ne The Right Way™ to do it?

Update: I'm using jQuery 1.3.2 and jQueryUI 1.7.2. A possible problem could be that I have two independent sortable lists on the page, so I have sortable1 and sortable2 classes. I'm actually doing:

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

Update2: the problem was me using .sortable instead of #sortable. Everything works fine now.

Upvotes: 29

Answers (7)

Andi

Reputation: 115

Whilst the suggested posts before me were useful, they didn't solve what I was trying to achieve. I wanted to turn on and off sortable across multiple areas and add the ability to make content selectable again.

Here is the code that I used:

function AddSortable() {

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

    return false;
};

function RemoveSortable(){

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

    return false;
}

Upvotes: 4

VorTechS

Reputation: 493

If you want to disable all sortables (as I needed to) then you can use the sortables class 'ui-sortable' as the selector.

e.g

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

Upvotes: 3

Rahul Gupta

Reputation: 10141

To disable sortable() you can use

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

To toggle enable/disable on the click of a button with 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");
  }
});

Upvotes: 2

Chris Glasier

Reputation: 811

Thanks Michal

I made a version for lists that can be either sortable or editable.

Very useful for me at least!

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

Upvotes: 5

Mars Robertson

Reputation: 13213

I was in the process of debugging:

click to make sortable
finish (sortable disable)
click to make sortable again didn't work
solution / workaround: set disabled option to false explicitly

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

Hope that helps.

Upvotes: 15