删除仅排除项目的可排序列表上的项目

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>

如果您要将"单词单词" 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将有效地移动项目,除非您首先克隆它).