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

2019年8月4日 198次阅读

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>

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

最佳答案 我想你可以使用
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/

点赞