jQuery sortable item height

Question

I've got a simple jQuery sortable based on a list as follows:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

I've created a helper function so that regardless of what the contents of an item may be, the helper is always the same fixed size.

My problem is that if I drag an item that has a lot of content (says several paragraphs of text), even though my helper is only a single line in height, the item will not drop onto the item below until it has travelled at least the original height of my item.

For example:

<ul>
  <li>Item 1
  line2
  line3
  line4
  line5
  </li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

If I drag item1 my helper turns this into a single line - nice and easy to drag. However, I still need to move the mouse 5 lines down the screen before item1 can be dropped between item2 and item3. Once I do drag it sufficient height the item then seems to function as I would expect, and I no longer need to drag it the original height.

I've tried all of the sortable options I can think of but to no avail and am hoping that someone has a suggestion.

$( '#sortable' ).sortable( {
  placeholder: 'highlight',
  axis: 'y',
  helper: function( event ) {
   return $( this ).find( '.drag' ).clone();
 },
});

Answer 1

You could grab the current height of the Div being dragged, save it in a variable and assign a generic height to the DIV being dragged. Once it's placed, use the call back to reassign the height within the variable.

var curHeight = $(div).height();  

$(div).css({height: 20px;});

You may also want to consider forceHelperSize

Answer 2

After much hair-tearing I added this event to the sortable:

  start: function( event, ui ) {
    $( this ).sortable( 'refreshPositions' )
  },

It seems to do the trick as I think start() is called after the helper has been created, so refreshing the positions resets the height. Probably jQuery should do this itself, but for now I'm happy.