jQuery UI Sortable-嵌套Sortable Divs connectWith

Question

I'm using JQuery UI Sortable to try to have a group of sortable divs, which could also potentially be divs that have sortable applied to them. And these sortables should be able to move items between each other.

I'm able to get items in the parent sortable div to the children sortable divs, but I can't get the items from the children back to the parents.

Is this possible?

<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"});

Here is what I'm working with: http://jsfiddle.net/5pm24/

You can see that outside items can be dragged into the black boxes, but once they are there they cannot be brought back out.

I want to get a .block from .block-sub-container to move directly under #block-container.

Answer 1

In fact it works fine, however you set float:left for the .block causing the parent #block-container shrink to empty size . Because you did not set explicit size for the parent. If you don't want to set explicit size, I think you can set the overflow:auto for it and the problem will be solved.

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

Demo.

Although the overflow:auto helps showing the border to wrap all the contents but looks like sometimes the drag and drop does not work expectedly when you drop the item inside the border bounds. The best solution is fixing the size of the container, it also prevent flickering while dragging and dropping. Test this demo to see the difference.