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

我有一个类似上图的可排序列表，每个可排序元素之间都有一个图标

jquery UI sortable中的当前代码如下所示：

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

问题是，如何

1） 使图标不可排序

2） 如果将第一个项目拖到最后一个项目，如何使第二个项目成为第一个项目并位于图标上方

非常感谢你的帮助

JSfiddle：

移动

内的每个图标，因为无论如何

不应包含

元素直接通过HTML规范

如上所述，它也将解决您的#2问题

---

感谢回复，然后当拖动图标时，跟随可拖动项目，如果最后一个项目发生更改，最后一个图标可能跟随最后一个项目，请参阅：

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