CODEWITHSUNDEEP
javascripthtmlsortingrubaxa-sortable
user3159270
user3159270

Reputation: 129

Disable Sortable option

How can I disable sorting using the javascript from https://github.com/RubaXa/Sortable temporarily?

see this jsfiddle example. that's how it's set up:

$('ul').each(function( index ) {new Sortable(this, { group: "sortgroup" });
             });

Upvotes: 4

Views: 6362

Answers (2)

Dan Dascalescu
Dan Dascalescu

Reputation: 151893

The dev version, which will be released in December 2014, introduces a sort: <Boolean> option. Setting it to false disables the ability to sort the list. This is useful if you want to have a "source" list, from which you can drag elements into a "destination" list, but don't want to sort elements in the source list.

Check out the demo - http://rubaxa.github.io/Sortable/#ag

Standalone non-sortable list demo: http://jsbin.com/sevofa/1/edit?html,js,output

var sortable = new Sortable(document.getElementsByClassName('sortable')[0], {
      group: 'foo',
      sort: false,
      animation: 150
});

switcher.onchange = function () {
  var on = switcher.sort.value == 1;
  sortable.option('sort', on);
};
<script src="https://rawgit.com/RubaXa/Sortable/dev/Sortable.js"></script>

<form id="switcher">
  sort: 
  <label><input checked name="sort" value="0" type="radio"/> false</label>  
  <label><input name="sort" value="1" type="radio"/> true</label>
</form>

<ul class="list-group sortable">
  <li class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>

Upvotes: 1

Tohveli
Tohveli

Reputation: 485

You could try to give the constructor handle-parameter.

$('ul').each(function( index ) {
    new Sortable(this, { group: "sortgroup", handle: ".someClass"});
});

Sort happends when user clicks element containing that class. Instructions here.

Upvotes: 2

Related Questions