嵌套的可排序元素被卡住

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",. 移除它可以解决这个问题。