javascript - 将项目拖放到仅包含排除项目的可排序列表中

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

您可以在可排序列表上使用“接收”事件(当您提供选项时)，并执行如下操作:

$('.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 将有效地移动项目，除非您先克隆它)。