Jquery UI sortable widget has divider among sortable item

Question

I have a sortable list like the above image, each sortable element has a icon between them.

The current code in jquery UI sortable is like this:

<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"
});

The problem are , how to

1) make the icon not sortable

2) if the first item is drag to last item, how to make the second item become the first item and above the icon?

Thanks a lot for helping.

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

Answer 1

1. Move each icon inside <li> as anyway <ul> should not contain <i> elements directly by HTML spec.
2. See the above , it will fix your #2 issue too.