jQuery UI Sortable-嵌套Sortable Divs connectWith

Question

我正在使用JQuery UI Sortable尝试具有一组可排序的div，也可能是已对其应用了可排序的div。 这些可排序对象应该能够在彼此之间移动项目。

我能够将父项可排序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

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

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

演示

尽管overflow:auto可以帮助显示边框来包装所有内容，但是当您将项目放在边框内时，有时拖放似乎无法正常进行。 最好的解决方案是固定容器的尺寸，还可以防止在拖放过程中闪烁。 测试此演示以了解差异。