title: How to add new elements to jQuery Sortable with fixed elements?
body: <p>I came across a post (<a href="https://stackoverflow.com/questions/17512895/jquery-ui-sortable-dynamic-fixed-items">jQuery UI Sortable dynamic fixed items</a>) from some time ago while trying to find an answer to my current question. Unfortunately, the OP's question was not really answered. Please do forgive me for therefore re-opening the original question.</p>
  
  <p>I have a jQuery Sortable with 'fixed' elements:</p>
  
  <pre><code>&lt;ul id='sortable'&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
    &lt;li class='fixed'&gt;item 3&lt;/li&gt;
    &lt;li&gt;item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have excluded the fixed items from sorting by using DarthJDG's suggestions in this post (<a href="https://stackoverflow.com/questions/4299241/jquery-sortable-lists-and-fixed-locked-items">JQuery sortable lists and fixed/locked items</a>) and everything is working nicely.</p>
  
  <p>When I dynamically add or remove an item to the sortable, I would like to have the position(s) of the fixed element(s) honoured.</p>
  
  <p>So, after an add event this would be the desired list:</p>
  
  <pre><code>&lt;ul id='sortable'&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;NEW ITEM&lt;/li&gt;
    &lt;li class='fixed'&gt;item 3&lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
    &lt;li&gt;item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Or after deleting item 2 from the original list, this would be the desired outcome:</p>
  
  <pre><code>&lt;ul id='sortable'&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 4&lt;/li&gt;
    &lt;li class='fixed'&gt;item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Any help on the matter would be greatly appreciated! </p>
  
  <p>EDIT: here's a fiddle of what I have so far: <a href="http://jsfiddle.net/1cucuj91/" rel="nofollow noreferrer">http://jsfiddle.net/1cucuj91/</a></p>