How to reliably hide elements when using jQueryUI Sortable?

Question

I have a DIV collection with lots of content (headers and text fields). I want to be able to drag / sort them using JQueryUI sortable (). But there are so many content in each DIV, I want to hide the unnecessary content when the user starts to drag and restore the content when they stop.

This just works when dragging items at the top of the list. But when there is more content than what fits on the screen, dragging the bottom items up the list is a jagged and certainly bad user interface.

My code is:

$(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 for some of the DIVs to exit the screen, scroll to the bottom, then try and drag it.

How to make the process easier and more reliable?

Answer 1

You can use the cursorAt option, this seems to help a lot.

Working example

 $(document).ready(function () { $('.handle').mousedown(function() { $('.stuff-to-hide').hide(); }); $("#SortParent").sortable({ cursorAt: {top:25, left:15}, //Important bit 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'); } }); }); 

Or you could use some sort of sortable accordion:

Working example

  $(function () { $("#accordion") .accordion({ active: true, header: "> div > h3", collapsible: true }) .sortable({ forceHelperSize: true, cursorAt: { top: 5 }, tolerance: 'pointer', axis: "y", handle: "h3", placeholder: "place", start: function () { var active = $("#accordion").accordion("option", "active"); $("#accordion").accordion("option", "active", false); }, stop: function (event, ui) { // IE doesn't register the blur when sorting // so trigger focusout handlers to remove .ui-state-focus ui.item.children("h3").triggerHandler("focusout"); } }); });