JQuery UI 可排序 - 嵌套的可排序 Divs connectWith答案

【问题标题】：JQuery UI Sortable - Nested Sortable Divs connectWithJQuery UI 可排序 - 嵌套的可排序 Divs connectWith
【发布时间】：2014-06-23 02:23:07
【问题描述】：

我正在使用 JQuery UI Sortable 来尝试创建一组可排序的 div，这些 div 也可能是应用了 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 下。

【问题讨论】：

标签： javascript jquery-ui

【解决方案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 看看有什么不同。

【讨论】：