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",造成的。删除它可以解决问题。

嵌套的可排序元素被卡住

1 个答案: