title: SortableJS keep non draggable items fixed
body: <p>I have a list created using SortableJS and has a few items which cannot be dragged and dropped. Here is an example of how it looks:</p>
  <pre><code>&lt;ul id=&quot;user_selections&quot;&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Class <code>no_drag</code> are the items that are fixed.</p>
  <p>Now when I move Items 3 above Item 1 the structure should be like this:</p>
  <pre><code>&lt;ul id=&quot;user_selections&quot;&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 3&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 1&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
      &lt;li&gt;Item 2&lt;/li&gt;
      &lt;li class=&quot;no_drag&quot;&gt;Fixed&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Can anyone please help me how to achieve this kind of behaviour.</p>
  <p>Here is the JS code I have tried:</p>
  <pre><code>var el = document.getElementById('user_selections');
  if (el) {
      const sortable = Sortable.create(el, {
          filter: '.no_drag',
          onMove(evt, oe) {
              return evt.related.className.indexOf('no_drag') === -1;
          },
          preventOnFilter: false,
          onEnd: function(/**Event*/evt) {
              // Some ajax call to save the new indexes
          }
      });
  }
  </code></pre>