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

时间:2014-07-29 13:34:48

标签: javascript jquery jquery-ui

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>

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

1 个答案:

答案 0 :(得分:2)

我认为您可以使用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/