Prevent elements with a classname "disabled" to move with Sortable.js

I have a list of items, which contains couple items with a class name disabled.

When dragging items, those "disabled" elements should stay fixed and should not move or being pushed.

What is the proper way to do it ?

// List with handle
Sortable.create(listWithHandle, {
  handle: '.glyphicon-move',
  animation: 150,
  filter: ".disabled",
  onMove: function (evt) {
    return evt.related.className.indexOf('disabled') === -1;
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  
  
  <!-- Latest Sortable -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
  
  <div id="coolElement"></div>
  
  <!-- List with handle -->
  <div id="listWithHandle" class="list-group">
    <div class="list-group-item">
      <span class="badge">14</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      Drag me by the handle
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      You can also select text
    </div>
    <div class="disabled list-group-item">
      <span class="badge">1</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      Should stay at index (2)
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      You can also select text
    </div>
    <div class="disabled list-group-item">
      <span class="badge">1</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      Should stay at index (4)
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      You can also select text
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      You can also select text
    </div>
    <div class="list-group-item">
      <span class="badge">2</span>
      <span class="glyphicon glyphicon-move" aria-hidden="true"></span>
      You can also select text
    </div>
  </div>

  
</body>
</html>

Solution

The only thing that comes to mind is changing the default behaviour of sortable function.

Instead of making it possible to drag items around to insert them at a particular index, you could use a native swap plugin to make it so you swap items instead. This way there won't be any side effects of reordering list elements and you could keep your logic for disabling swaping the element and with the element.

Sortable.create(list, {
  swap: true,
  swapClass: "highlight",
  animation: 150,
  filter: ".disabled",
  onMove: event => {
    return !event.related.classList.contains('disabled');
  }
});

.highlight {
  background-color: #f9c7c8 !important;
}

<body>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  
  
  <!-- Latest Sortable -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>

  
  <div id="list" class="list-group">
    <div class="list-group-item disabled">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item disabled">Item 4</div>
    <div class="list-group-item">Item 5</div>
  </div>
</body>
</html>