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:

<ul id="user_selections">
    <li class="no_drag">Fixed</li>
    <li>Item 1</li>
    <li class="no_drag">Fixed</li>
    <li>Item 2</li>
    <li class="no_drag">Fixed</li>
    <li>Item 3</li>
    <li class="no_drag">Fixed</li>
</ul>

Class no_drag are the items that are fixed.

Now when I move Items 3 above Item 1 the structure should be like this:

<ul id="user_selections">
    <li class="no_drag">Fixed</li>
    <li>Item 3</li>
    <li class="no_drag">Fixed</li>
    <li>Item 1</li>
    <li class="no_drag">Fixed</li>
    <li>Item 2</li>
    <li class="no_drag">Fixed</li>
</ul>

Can anyone please help me how to achieve this kind of behaviour.

Here is the JS code I have tried:

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