Controlling Placeholder Height with jQuery-UI Sortable

Question

I'm using the jQuery-UI sortable component to drag table rows. Because of my requirements, I'm creating a helper element to hold multiple rows during the drag.

I seem to have this working, but the empty space inserted at the current drag position is only tall enough for a single row. Can anyone see why the placeholder isn't as tall as the content I'm dragging?

I tried setting style="height:auto" in the parent element being dragged but this has no effect.

I've posted my code on jsFiddle at http://jsfiddle.net/jCNcv/. If you try dragging the top item down, you can see that the empty placeholder under the drag position is only tall enough for a single row.

Answer 1

The placeholder is only the height of one row because each sortable item is only one row. You can set the placeholder height during the start event to the height of your helper element.

start: function(e, ui ){
     ui.placeholder.height(ui.helper.outerHeight());
},

Updated jsfiddle http://jsfiddle.net/jCNcv/2/