正在删除可排序列表中只有已排除项目的项目

Dropping an item on a sortable list that only has excluded items

本文关键字：项目 排除 删除 排序 列表      更新时间：2023-09-26

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

这就是预期用途，我希望每个列表底部的排除项目始终位于底部。

问题是，如果我清空一个列表，比如我拖出它的所有项目并将它们放在另一个列表中，那么剩下的就是不可排序的项目。如果我把一个新项目拖到它里面，它会一直拖到底部，在我的不可排序、不可丢弃的目标项目下面。

当将一个新项目放入只有一个不可排序项目的可排序列表时，是否有可能将其放置在列表的顶部

示例代码：

$('.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下面。

您可以在可排序列表上使用"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将有效地移动项目）。

这可能更倾向于破解，但您可以在每个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/

相关文章：