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

Question

I'm using jQuery's sortable UI feature.

我有一个带有几个列表项的无序列表。当您单击其中一个列表项时，它将变为＆＃34;活动＆＃34;项目清单。我想将这个（并且只有这个）列表项可移动到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>

为了清楚起见，此列表中的任何项目都可以变为活动状态。但我只希望活动元素可移动。

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/