Jquery UI中可排序项目之间的不可排序项目答案

【问题标题】：Non sortable item between sortable item in Jquery UIJquery UI中可排序项目之间的不可排序项目
【发布时间】：2015-12-14 15:44:23
【问题描述】：

每个可排序项之间都有一个图标，但不是最后一个，当然该图标是不可排序的，

但从 jquery UI 示例无法达到预期结果

<ul id="sortable">
<li>itemA<p>-----</p></li>
<li>itemB<p>-----</p></li>
<li>itemC<p>-----</p></li>
<li>itemD</li>
</ul>


$("#sortable").sortable({
    items: "> li"
});

https://jqueryui.com/resources/demos/sortable/items.html

这里是 jsfiddle，在这种情况下，项目 D 后面总是没有图标，但不一定是最后一个

https://jsfiddle.net/Lzp821qs/

非常感谢您的帮助。

更新：

不好意思，情况是这样的：

首先我有一个类似的列表

A
icon
B
icon
C
icon
D

然后我想让它可排序，但保留图标，例如。 A 可以与 B 切换，那么它将是

B
icon
A
icon
C
icon
D

【问题讨论】：

小提琴中的那些破折号是否应该代表图标？我仍然有点不清楚问题是什么。您是否在问如何通过排序维护图标？您是否在问如何在最后一个从最后一个排序时添加新图标？如果破折号代表图标，则它们将始终与排序分开，因为它们位于 li 内。
更改您的标记并使用此建议stackoverflow.com/questions/15370754/…
更新了问题，请随时询问更多细节。谢谢
你试过我的建议了吗？
谢谢。使用 cancel / items 时的问题是，如果我用 B 切换 A，图标将移动到底部，它变为 B->A->icon ，而不是 B->icon->A

标签： javascript jquery html css jquery-ui

【解决方案1】：

更新，由于问题混淆。

这个 jquery 语句会做你正在寻找的东西。当排序列表发生变化时，它会删除间隔项（由带有四个连字符的跨度表示），添加空格，然后找到最后一个间隔并删除它（这是由于在构建时无法准确选择，由于li 节点顺序的不确定性）。

$("#sortable").sortable({
    items: "> li"
    ,
    change: function(event, ui) {
        $(".breaker").remove();
        $("#sortable>li:not(.ui-sortable-helper)").after("<span class='breaker'>----</span>");
        $("#sortable>span").last().remove();
    }
});

https://jsfiddle.net/s8uajffp/

【讨论】：

感谢您的帮助。请查看更新后的问题
我不明白更新，您的图标有问题吗？
itemD应该是可排序的，如果itemD上移，例如切换到itemB，那么itemB应该没有
-----
跟随它
很抱歉，如果有不清楚的地方请告诉我
@user3538235 更新了答案以反映您在寻找什么。