Jquery UI中可排序项之间的不可排序项

Question

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

但是从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

Answer 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/