在仅包含排除项目的可排序列表中删除项目

Question

我有几个连接在一起的可排序列表，所以我可以从一个列表中拖动一个项目并将其放入另一个列表中。每个列表的底部也有一个既不可排序也不能放置目标的项目，因此无法放置其下方的任何项目。

这是预期用途，我希望每个列表底部的排除项始终保持在底部。

问题是如果我清空一个列表，比如说我拖出它的所有项目并将它们放在另一个列表中，那么剩下的就是不可排序的项目。如果我随后将一个新项目拖入其中，它将始终位于底部，在我的不可排序、非放置目标项目下方。

是否可以在将新项目放入只有一个不可排序、非放置目标项目的可排序列表中时，将其置于列表顶部？

示例代码：

$('.segment ol').sortable({
  connectWith: '.segment ol',
  distance: 25,
  items: 'li:not(.disabled)'
});

HTML：

    <div class="segment">
      <ol>
        <li>word word word</li>
        <li>word word word</li>
        <li class="disabled">must stay at bottom</li>
      </ol>
    </div>
    <div class="segment">
      <ol>
        <li class="disabled">must stay at bottom</li>
      </ol>
    </div>

如果您要将“word word word”li 拖到另一个列表中，它将被附加到禁用的 li 下方。

Answer 1

您可以在可排序列表上使用“receive”事件（当您提供选项时），并执行以下操作：

$('.segment ol').sortable({
    connectWith: '.segment ol',
    distance: 25,
    items: 'li:not(.disabled)',
    over: function(event,ui){ ui.placeholder.insertBefore($(this).children('li.disabled:first')); }
});

这将使当前拖动的元素将自身添加到列表中（prepend 和 prependTo 将有效地移动项目，除非您先克隆它）。

Answer 2

这可能更偏向于黑客方面，但您可以在每个 0px 高或 display: none 的列表顶部添加一个可排序项目。这将强制该项目在该项目之后排序，而不是您的不可排序项目。

<ol>
    <li class="hidden"></li>
    <li>word word word</li>
    <li>word word word</li>
    <li class="disabled">must stay at bottom</li>
</ol>

CSS：

.hidden {
   display: none;
}

http://jsfiddle.net/HPM7V/2/