javascript - 禁用可排序选项

Question

如何暂时禁用使用https://github.com/RubaXa/Sortable中的 javascript 进行排序？

看到这个 jsfiddle 例子。这就是它的设置方式：

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

Answer 1

您可以尝试为构造函数提供句柄-参数。

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

当用户单击包含该类的元素时排序发生。说明在这里。

Answer 2

将于 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>