Stop siblings replacing order of canceled element with jQuery-ui

Question

What I'm trying to do

I'm using the jQuery-ui to sort a number of sections of html. So far the items are sortable. I want to disable sorting for two divs and keep the sortable functionality on the others.

I'm working within a CMS that has already declared these sections as sortable. What I'm trying to do is force the elements with a class of "not-sortable" to not be sortable.

Simplified example

HTML

<div class="normal-sortables">
    <div class"not-sortable">Not sortable section</div>
    <div class"not-sortable">Not sortable section</div>
    <div>Sortable section</div>
    <div>Sortable section</div>
</div> 

JQUERY

jQuery(function($) {
    $("#normal-sortables").sortable({
        cancel:".not-sortable"
    });
});

This prevents the "not-sortable" items from being dragagable, but if you move the siblings above these sections, they still move and their order is changed.

I found this question 13885665

So, I changed my solution above to

$( "#normal-sortables" ).sortable({
    items : ':not(.not-sortable)'
});

This disabled all items.

I'm not experienced with jQuery, I found much more complex solutions to my problem but I'd like to understand why the above isn't working and to keep things simple if possible.

It seems like I must be missing something obvious.

UPDATE

The code above does work, but my situation is more complicated. Therefore I've posted a new more specific question here

I'll keep this post updated with results too to keep things linked.

Answer 1

Not sure if you just had a typo or if something else happened, but items : ':not(.not-sortable)' seems to work.

jQuery(function($) {

  $(".normal-sortables").sortable({
    items: ":not(.not-sortable)"
  });

  $('.normal-sortables').disableSelection(); // added for example only
  
});

.normal-sortables div {
  border: 1px solid red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="normal-sortables">
  <div class="not-sortable">Not sortable section</div>
  <div class="not-sortable">Not sortable section</div>
  <div>Sortable section</div>
  <div>Sortable section</div>
</div>