Javascript 删除仅包含排除项的可排序列表中的项
我有几个可排序的列表连接在一起,所以我可以从一个列表中拖动一个项目并将其放入另一个列表中。每个列表的底部都有一个既不可排序也不可删除的项目,因此不可能删除下面的任何项目 这就是预期用途,我希望每个列表底部的排除项始终位于底部 问题是如果我清空了一个列表,比如说我拖出了它的所有项目并将它们放在另一个列表中,这样剩下的就是不可排序的项目。如果我将一个新项目拖入其中,它将始终位于底部,在我的非可排序、非下拉目标项目下方 将一个新项目放入只有一个不可排序的非下拉目标项目的可排序列表时,是否可以将其置于列表顶部? 示例代码:Javascript 删除仅包含排除项的可排序列表中的项,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我有几个可排序的列表连接在一起,所以我可以从一个列表中拖动一个项目并将其放入另一个列表中。每个列表的底部都有一个既不可排序也不可删除的项目,因此不可能删除下面的任何项目 这就是预期用途,我希望每个列表底部的排除项始终位于底部 问题是如果我清空了一个列表,比如说我拖出了它的所有项目并将它们放在另一个列表中,这样剩下的就是不可排序的项目。如果我将一个新项目拖入其中,它将始终位于底部,在我的非可排序、非下拉目标项目下方 将一个新项目放入只有一个不可排序的非下拉目标项目的可排序列表时,是否可以将其置于列
$('.segment ol').sortable({
connectWith: '.segment ol',
distance: 25,
items: 'li:not(.disabled)'
});
HTML:
字
字
必须位于底部
必须位于底部
如果要将“word”li拖动到另一个列表中,它将被附加到禁用的li下面,您可以使用可排序列表上的“接收”事件(当您提供选项时),并执行以下操作:
$('.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将有效地移动一个项目,除非您首先克隆它)。这可能更像是黑客行为,但您可以在每个列表顶部添加一个0像素高的可排序项目或
显示:无。这将强制该项在该项之后排序,而不是在不可排序的项之后排序
<ol>
<li class="hidden"></li>
<li>word word word</li>
<li>word word word</li>
<li class="disabled">must stay at bottom</li>
</ol>
请发布一些html示例,以及您试用过的jquery代码。问题是它不是一个bug,它只是可排序列表的默认工作方式,我想知道是否有解决方法。对。非常感谢。我的问题是,当您拖动项目时,占位符仍将显示在禁用项目的下方。所以这就是它预计降落的地方。我希望有一个更人性化的解决方案。啊,好吧,那应该可以解决了。现在,当您将项目移动到已连接的可排序列表时,它应该在第一个禁用的li之前插入占位符。是。这应该行得通。我只是自己想的,你最初的回答肯定让我走上了正确的轨道。下面是我将要使用的:over:function(event,ui){ui.placeholder.prependTo(ui.placeholder.parent());}
非常感谢!您可以通过在insertBefore()
周围添加if($(this).children().length==2){}
来解决此问题。由于静态项加上占位符,它将是2。谢谢@JeffB<代码>如果($(this.children().length==2){$(this.prepend(ui.placeholder);}
确实是我遇到的问题的完整答案。实际上,我更喜欢这个。这样,我就不必像另一个答案所建议的那样,担心手动覆盖占位符时的怪癖。一旦列表中有一个项目,我希望它是100%默认值。这条路线实现了这一点。我移除隐藏的li on drop,并将其添加到移动后的任何空列表中。谢谢你的主意。
<ol>
<li class="hidden"></li>
<li>word word word</li>
<li>word word word</li>
<li class="disabled">must stay at bottom</li>
</ol>
.hidden {
display: none;
}