javascript - jQuery sortable - 只移动一个项目

Question

I'm using jQuery's sortable UI feature.

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