Nested sortable elements getting stuck

I have made four sortable .sort columns which contain .sortable elements that can be sorted. Inside .sortable I have placed .sort-sortable elements. I can drag/drop .sort-sortable inside .sortable and do the same with .sortable inside .sort.

The problem is that although I can drag/drop .sort-sortable inside .sort it gets stuck there and I cannot move it anywhere else. I have two questions:

  • Is there anyway I can restrict .sort-sortable to move to .sort?
  • Why does .sort-sortable get stuck? What am I doing wrong?

$(function() {
  $(".sort").sortable({
    connectWith: ".sort, sortable",
    handle: ".head",
    cursor: 'Move',
  });
  
  $(".sort").disableSelection();

  $(".sortable").sortable({
    connectWith: ".sortable, .sort",
    cancel: ".head"
  });
  
  $(".sortable").disableSelection();
});
.sort {
  display: block;
  width: 23%;
  float: left;
  margin: 20px 1%;
  padding: 10px;
  box-sizing: border-box;
  background: #bfe0ff;
  min-height: 800px
}

.sortable {
  min-height: 350px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #bbb;
  margin: 0 0 20px 0;
}

.sortable .head {
  padding: 20px;
  text-align: center;
  background: #7F7F7F;
  color: #fff;
  font-weight: bold;
  margin: 0 0 20px 0;
}

.sortable .sortable {
  background: #ffbbbc;
}

.sort-sortable {
  min-height: 100px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #333;
  margin: 0 0 20px 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>
<div class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>
<div class="sort"> </div>
<div class="sort">
  <div class="sortable">
    <div class="head">Drag Me Please!</div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
    <div class="sort-sortable"></div>
  </div>
</div>