jQuery 可排序 - 只移动一项答案

【问题标题】：jQuery sortable - only move one itemjQuery 可排序 - 只移动一项
【发布时间】：2014-07-29 13:34:48
【问题描述】：

我有一个包含一些列表项的无序列表。当您单击其中一个列表项时，它将成为“活动”列表项。我想让这个（并且只有这个）列表项可移动到 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>

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

【问题讨论】：

只有活动项目，其他项目没有？你有什么代码可以开始吗？
这不是默认行为吗？您不能同时移动多个对象还是有 2 只鼠标？ o.o
@JimmyKnoot 好吧，它只会在您点击时切换到活动元素（并键入您的点击）。 sortable 与按住鼠标一起工作，因此它不会切换到活动类。
@TrevorW 我不太确定我明白你到底想做什么..
我认为这应该对您有所帮助：stackoverflow.com/questions/11319663/…。这不是您的确切解决方案，但您可以使用该方法停用必要的 li。

标签： javascript jquery jquery-ui

【解决方案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/

【讨论】：

+1，非常简单易懂的代码。正是我想要的。