禁用可排序选项

Question

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

Answer 1

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 .

Answer 2

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> 

Answer 3

This is using the html5 draggable attr. You can simply disable it.

$('#items li').attr('draggable', 'false')