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将有效地移动项目，除非你先克隆它。）

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/

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

2 个答案: