Question

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

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

Answer 1

你可以尝试给构造函数句柄 - 参数。

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

当用户单击包含该类的元素时，

对发生的事件进行排序。 Instructions here

Answer 2

将于2014年12月发布的dev version会引入sort: <Boolean>选项。将其设置为false会禁用对列表进行排序的功能。如果你想要一个＆＃34;来源＆＃34;这很有用。列表，您可以从中将元素拖动到＆＃34;目的地＆＃34;列表，但不想对源列表中的元素进行排序。

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

独立的不可排序列表演示：http://jsbin.com/sevofa/1/edit?html,js,output

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是使用html5 draggable attr。你可以简单地禁用它。

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

禁用可排序选项

3 个答案: