jQuery Sortable with collapsed content

Question

I want to use jQuery sortable function to all a user to arrange boxes. Simple enough. The boxes can get quite tall, however, so when they click on the handle to sort, I'd like all of the boxes to collapse. I got something working (shown below). When you try sorting the first row, everything works great. But anything below that and it gets a little weird.

First off, is there a better way to do this that I'm not thinking of?

Second, if I'm staying with this code, is there a way to make sure the now collapsed div that is select snaps to and stays with the mouse? If you look at it now, when you select a div not from the first row, the selected div is a lot higher than where the mouse is (because of the collapsing).

The jsFiddle: http://jsfiddle.net/cwv9usqf/5/

$('.header').mousedown(function(){ $('.content').hide(); })

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  stop: function(){ $('.content').show(); }
});

Another note: right now when you simply click on the header, the portlets collapse. Is there a way I can only have them collapse when the drag is happening?

Thanks in advance!

Answer 1

I figured it out:

(updated Fiddle) http://jsfiddle.net/cwv9usqf/6/

$('.container').sortable({
  connectWith: '.container',
  items: '.portlet',
  handle: '.header',
  tolerance: 'pointer',
  revert: true,
  placeholder: 'placeholder',
  start: function(){ $('.content').hide(); },
  stop: function(){ $('.content').show(); }
});

I added the 'start' option to it and removed the mousedown/mouseup listeners all together.