Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery sortable item height

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();
 },
});
like image 956
John Avatar asked Sep 29 '09 19:09

John


2 Answers

The following worked for me:

stop: function(event,ui){
    ui.item.height("auto");
}
like image 43
Alan M Avatar answered Nov 02 '22 13:11

Alan M


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.

like image 118
John Avatar answered Nov 02 '22 11:11

John