How to reliably hide elements when using JQueryUI Sortable?

How to reliably hide elements when using JQueryUI Sortable?

I have a collection of DIVs with a lot of content (titles and textareas)
in them. I want them to be draggable/sortable with JQueryUI's sortable()
system. But there's so much content in each DIV, I want to hide unneeded
content when the user starts dragging, and restore the content when they
stop.
It works merely okay when dragging items near the top of the list. But
when there's more content than what fits on the screen, dragging the lower
elements up the list is flaky and definitely a bad user experience.
My code so far:
$(document).ready(function () {
$('.handle').mousedown(function() { $('.stuff-to-hide').hide(); });
$("#SortParent").sortable({
handle: '.handle',
items: '.sort-child',
start: function(event, ui) {
$('.stuff-to-hide').hide();
$('.sort-child').addClass('diff-height');
},
helper: function() { return '<p>MY DRAGGING BAR</p>'; },
forceHelperHeight: true,
stop: function() {
$('.stuff-to-hide').show();
$('.sort-child').removeClass('diff-height');
}
});
});
I have a JSFiddle http://jsfiddle.net/FzUZg/8/ that demonstrates the
problem. Make your window small enough so that some of the DIVs are off
the screen, scroll to the bottom one, then try dragging it up.
How do I make the experience easier and more reliable?