Question

我正在使用JQuery UI Sortable尝试拥有一组可排序的div，这些div也可能是可以对其进行排序的div。这些sortables应该能够在彼此之间移动物品。

我能够将父类可排序div中的项目添加到子类可排序的div中，但我无法将子项中的项目返回给父项。

这可能吗？

<div id="block-container">
  <div class="block">block1</div>
  <div class="sub-wrapper">
    <div class="block-sub-container">
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>   
</div>


$('#block-container').sortable({connectWith: ".block-sub-container"});
$('.block-sub-container').sortable({connectWith: "#block-container"});

以下是我正在使用的内容：http://jsfiddle.net/5pm24/

你可以看到外面的物品可以被拖入黑匣子里，但是一旦它们在那里就不能被带回来。

我想从.block-sub-container中获取.block直接在＃block-container下移动。

Answer 1

事实上它工作正常，但是您为float:left设置了.block，导致父#block-container 缩小为空白 。因为您没有为父级设置显式大小。如果您不想设置明确的大小，我认为您可以为其设置overflow:auto，问题将得到解决。

#block-container {
  /* set border to see its boundary */
  border:1px solid black;
  overflow:auto;
}

Demo.

虽然overflow:auto有助于显示边框以包装所有内容，但有时看起来有时拖放在边框边界内放下项目时无法正常工作。最好的解决方案是固定容器的大小，它还可以防止拖放时的闪烁。测试this demo以查看差异。

JQuery UI Sortable - 嵌套可排序Divs connectWith

1 个答案:

Demo.