Jquery UI可排序小部件在可排序项之间具有分隔符

Question

我有一个像上面这个图像的可排序列表，每个可排序元素之间都有一个图标。

jquery UI中的当前代码可排序如下：

<ul class="sortable_panel">
<li></li>
<i class="icon"></i>
<li></li>
<i class="icon"></i>
<li></li>
</ul>

使用Javascript：

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

问题是，如何

1）使图标无法排序

2）如果第一项被拖到最后一项，如何让第二项成为第一项和图标上方？

非常感谢你的帮助。

JSfiddle：https://jsfiddle.net/cqx0ask6/

Answer 1

1. 移动<li>内的每个图标，因为<ul>不应包含 HTML规范直接提供<i>个元素。
2. 请参阅上文，它也将解决您的＃2问题。