title: Non sortable item between sortable item in Jquery UI
body: <p><a href="https://i.stack.imgur.com/Qk5FK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qk5FK.png" alt="enter image description here"></a></p>
  
  <p>There is an icon between each sortable item , but not the last one, and of course the icon is non - sortable,</p>
  
  <p>but from jquery UI example can't achieve the expect result</p>
  
  <pre><code>&lt;ul id="sortable"&gt;
  &lt;li&gt;itemA&lt;p&gt;-----&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;itemB&lt;p&gt;-----&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;itemC&lt;p&gt;-----&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;itemD&lt;/li&gt;
  &lt;/ul&gt;
  
  
  $("#sortable").sortable({
      items: "&gt; li"
  });
  </code></pre>
  
  <p><a href="https://jqueryui.com/resources/demos/sortable/items.html" rel="nofollow noreferrer">https://jqueryui.com/resources/demos/sortable/items.html</a></p>
  
  <p>Here is the jsfiddle, in this case the item D will always have no icon follow it but it doesn't necessarily the last one</p>
  
  <p><a href="https://jsfiddle.net/Lzp821qs/" rel="nofollow noreferrer">https://jsfiddle.net/Lzp821qs/</a></p>
  
  <p>Thanks a lot for helping.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Sorry for confusing, the case is like this:</p>
  
  <p>first I have a list like</p>
  
  <pre><code>A
  icon
  B
  icon
  C
  icon
  D
  </code></pre>
  
  <p>Then I would like to make it sortable, but maintain the icon, eg. the A can switch with B , then it would be</p>
  
  <pre><code>B
  icon
  A
  icon
  C
  icon
  D
  </code></pre>