嵌套的可排序元素卡住

Question

我制作了四个可排序的.sort 列，其中包含可以排序的.sortable 元素。在.sortable 里面我放置了.sort-sortable 元素。我可以将.sort-sortable 拖放到.sortable 中，并对.sortable 中的.sort 执行相同的操作。

问题是，虽然我可以将.sort-sortable 拖放到.sort 中，但它会卡在那里，我无法将它移动到其他任何地方。我有两个问题：

• 无论如何我可以限制.sort-sortable 移动到.sort？
• 为什么.sort-sortable 会卡住？我做错了什么？

$(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>

Answer 1

我认为这是因为handle: ".head",。删除它会解决问题。