jQuery可排序 - 仅移动一个项目

Question

我正在使用jQuery的可排序UI功能。

我有一个无序列表，其中包含几个列表项。当您单击其中一个列表项时，它将成为“活动”列表项。我想使此（仅此）列表项可移动到ul中的任何位置。

<ul>
  <li class="li_item">Item 1</li>
  <li class="li_item">Item 2</li>
  <li class="li_item_active">Item 3</li>
  <li class="li_item">Item 4</li>
  <li class="li_item">Item 5</li>
  <li class="li_item">Item 6</li>      
</ul>

明确一点，这个列表中的任何项目都可以变为活动状态。但我只希望活动元素是可移动的。

- Trevor Wood

---

只有激活的元素，而不是其他的吗？你有什么代码可以开始用吗？ - dfsq

这不是默认行为吗？您不能同时移动多个对象，或者您有两个鼠标吗？o.o - Jimmy Knoot

@JimmyKnoot 好的，只有在您单击（并松开鼠标）时，它才会切换到活动元素。可排序功能需要按住鼠标才能工作，因此不会切换到活动类。 - Trevor Wood

@TrevorW 我不太确定你想要做什么... - Jimmy Knoot

我认为这个链接可以帮到你：https://dev59.com/TmXWa4cB1Zd3GeqPPbTB。虽然不是完全符合你的需求，但你可以使用其中的方法来禁用需要的li元素。 - bencripps

Answer 1

我认为你可以使用cancel选项。就像这样:

var $ul = $("#sortable"),
    $li = $ul.children();

$ul.sortable({
    cancel: ".item-disabled"
});

$ul.on('click', '.item', function() {
    $li.removeClass('item-active').addClass('item-disabled');
    $(this).toggleClass('item-active item-disabled');
})

$li.addClass('item-disabled');

演示：http://jsfiddle.net/Eqc7v/1/

- dfsq

---

+1，非常简单易懂的代码。正是我所需要的。 - Trevor Wood