ulのsortableで、特定のliを固定した状態で、固定されていないliだけでD&Dで並び替える方法

お世話になります。

件名について3日ほど調べてみたのですが、手法がわからず頓挫してしまいました。
御手数お掛け致しますが、ご助言頂けないでしょうか。

言葉での説明が大変難しいため、図を用いて説明致します。

１．前提として下図のように、li要素が並んでいるものとします。（なお、下は一例で、実際には列数、行数は不定となります）
![

２．li要素を複数選択して、移動させることはjQuery-UIのsortableを利用することで実現できました。
この例では、Item5とItem6をCTRLで選択して、D&DでItem1とItem2の間に持ってきてます。

２a．この時、例えば、Item3にfixpositionというクラスを付与し、Item3だけを固定させたまま、上記２と同じ操作をした場合に、Item5、6を移動させる方法がわかりません。なってほしい形は以下の通り（例では1つ固定にしておりますが、実際には複数固定されます）

試したこと
・sortableのcancelプロパティにfixpositionクラスを追記したところ、fixpostionクラスが付加されたli要素自体はD&Dが出来なくなりましたが、他のli要素を動かすと、並び順が変わってしまったため、要求を満たせなかった。

開発環境
・sakura editor
・Windows 7 Pro 64bit

フォルダ構成
・css、js、htmlが全て同一フォルダの中に入ってます。

個人的予想
・検討違いかもしれませんが、updateプロパティのsortable('serialize')の対象を変更？するだとか、indexをどこかに保持しておいてその通りに並び替えるだとかすれば、出来るような気がしていますが、コーディング方法がわかりません・・。

現状のコードを以下に記します。

HTML
1<link rel="stylesheet" href="jquery-ui.css">
2<link rel="stylesheet" href="index.css">
3<script src="jquery-3.3.1.min.js"></script>
4<script src="jquery-ui.js"></script>
5<script src="index.js"></script>
6<ul id="list">
7    <li id="item_1" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 1</li>
8    <li id="item_2" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 2</li>
9    <li id="item_3" class="ui-widget-content fixposition"><span class="sort-handle">&#8225;</span>Item 3</li>
10    <li id="item_4" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 4</li>
11    <li id="item_5" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 5</li>
12    <li id="item_6" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 6</li>
13    <li id="item_7" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 7</li>
14    <li id="item_8" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 8</li>
15    <li id="item_9" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 9</li>
16    <li id="item_10" class="ui-widget-content"><span class="sort-handle">&#8225;</span>Item 10</li>
17</ul><div style="clear: both;"></div>

下記　Index.jsの中身

JavaScript
1$(function(){
2	$('#list').selectable({
3		cancel: '.sort-handle'
4	}).sortable({
5		items: "> li",
6		handle: '.sort-handle',
7		cancel: '.fixposition',
8		helper: function(e, item) {
9			if (!item.hasClass('ui-selected')) {
10				item.parent().children('.ui-selected').removeClass('ui-selected');
11				item.addClass('ui-selected');
12			}
13
14			var selected = item.parent().children('.ui-selected').clone();
15			item.data('multidrag', selected).siblings('.ui-selected').remove();
16			return $('<li/>').append(selected);
17		},
18		stop: function(e, ui) {
19			var selected = ui.item.data('multidrag');
20			ui.item.after(selected);
21			ui.item.remove();
22		},
23		update: function() {
24			var order = $("#list").sortable('serialize');
25			console.log(order);
26		}
27	});
28});