Controlling Placeholder Height with jQuery-UI Sortable

18
votes

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.

1
jqueryhtmlcssjquery-uijquery-ui-sortable
It looks like you are trying to do some form of nested sortables? stackoverflow.com/questions/3308672/… - Nal
No, not nested sortables. Just sortable table rows with logical parent/child relationships. They are implemented as regular rows. - Jonathan Wood

1 Answers

64
votes

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/