禁用可排序選項

Question

如何暫時使用https://github.com/RubaXa/Sortable中的javascript禁用排序？

看到這個jsfiddle的例子 。 這就是它的設置方式：

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

Answer 1

你可以嘗試給構造函數handle -parameter。

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

當用戶單擊包含該類的元素時對事件進行排序。 這里的說明 。

Answer 2

dev版本將於2014年12月發布，它引入了一個sort: <Boolean>選項。 將其設置為false將禁用對列表進行排序的功能。 如果您想要一個“源”列表，從中可以將元素拖到“目標”列表中，但不希望對源列表中的元素進行排序，這將非常有用。

看看演示 - http://rubaxa.github.io/Sortable/#ag

獨立的不可排序列表演示： 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

這是使用html5 draggable attr。 你可以簡單地禁用它。

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