jQueryUI Sortable - Unable to drag large elements to the top or bottom if containment and handle set

Question

For the problem I'm trying to solve, I have a table with unique content for each row. The rows are allowed to be reordered via a handle, and the content of each row is not always of uniform height. Sometimes large amounts of text and / or images appear within a row.

There can also be multiple tables with rows that can be reordered, so I'm using the containment property to prevent dragging into other zones and other problematic issues that occur when dragging outside the desired area.

The problem is when I attempt to drag a "tall" row to the top or bottom of the order when the top and bottom are "short" by comparison. Essentially I am not allowed to drag tall rows to the these positions. I have searched for a solution and have come up short. Any help would be appreciated.

Working example here: http://jsfiddle.net/jeffvoigt/XyPzf/

Neither of the two middle rows can be dragged to the top or bottom of the list.

HTML:

<div class="container">
<table id="sortable">
  <tr class="odd">
    <td><p>[=]</p></td>
    <td>Single Line of Text</td>
  </tr>
  <tr class="even">
    <td><p>[=]</p></td>
    <td>Aenean porta, tellus quis auctor elementum, risus ante ornare augue, eu elementum nunc libero ut nisi. Pellentesque sed vestibulum tellus. Proin convallis enim eget felis iaculis viverra vestibulum lorem semper. Aliquam imperdiet viverra lorem, ut dignissim felis laoreet vel. Suspendisse fermentum neque eu est vestibulum bibendum. Maecenas dignissim egestas tempor. Ut tincidunt metus sed felis ornare nec sollicitudin risus gravida. Duis vitae mauris quis risus ultricies malesuada. Nulla facilisi. Phasellus fringilla, arcu eget congue sollicitudin, lorem elit ullamcorper ante, non fermentum orci mauris at tellus. Maecenas suscipit sodales molestie. Mauris luctus porta dui non volutpat.</td>
  </tr>
  <tr class="odd">
    <td><p>[=]</p></td>
    <td><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /></td>
  </tr>
  <tr class="even">
    <td><p>[=]</p></td>
    <td>Single Line of Text</td>
  </tr>
</table>
</div>

Javascript:

$( "#sortable tbody" ).sortable({
  axis: "y",
  containment: ".container",
  cursor: "move",
  handle: "p"
});

Answer 1

I faced the same issue. This is the quick solution:

 $('.collections').sortable({
  handle: 'h3',
  axis: 'y',
  containment: 'parent',
  items: '.collection',
  cursor: 'move',
  tolerance: 'pointer',
  scroll: true,
  beforeStop: function(event, ui) {
    var lastElemTop = $('.collections .collection:last-child').position().top;
    var currElemTop = ui.position.top;
    var currElemHeight = ui.item.height();
    if (currElemTop + currElemHeight * 2 > lastElemTop) {
      $('.collections .collection:last-child').insertBefore(ui.item);
    }
  }
});