Disable items to be pushed while dragging by other elements with SortableJS

Question

I'm using a SortableJs on a list composed from items, which contains fixed elements.

I would like the fixed elements to stay in the same place. They should not be dragged around, nor being reordered/pushed by other elements.

I'm clueless on how to do it. What is the best approach to achieve that ?

Sortable.create(document.getElementById('items'), {
  group: 'items',
  animation: 200,
  draggable: '.item',
  filter: '.fixed',
  dropBubble: true,
  onStart: function(e) {},
  onEnd: function(e) {},
  onMove: function(e) {}
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<ul id="items" class="items">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item fixed">Fixed at 3</li>
  <li class="item fixed">Fixed at 4</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
  <li class="item">Item 7</li>
</ul>

Answer 1

Looks like you just need to set:

draggable: '.item:not(.fixed)'