Controlling Placeholder Height with jQuery-UI Sortable

jquery html css jquery-ui jquery-ui-sortable
Jonathan Wood picture Jonathan Wood · Aug 22, 2012 · Viewed 14.5k times · Source

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

Nal picture Nal · Aug 23, 2012

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/

Related questions

Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
How to remove close button on the jQuery UI dialog?

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

Read More
Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time …

Read More