jQuery UI sortable: how to emulate the 'beforeStart' event?

Question

Hi guys, im using the jQuery UI sortable plugin for sort some tall fieldsets (~300px height).

My goal is to hide the main content of that fieldset, keeping visible just the legend tag (that is actually the sortable handler)... the problem is that, as you can see in the standard events of the sortable plugin, there is the beforeStop but not the beforeStart.

That's the code I wrote:

$(document).ready(function(){
    $("#label-copy-list").sortable({
        handle : '.handle',
        start: function(){
            $(".sort-hidden").hide();
        },
        stop: function(){
            $(".sort-hidden").show();
        }
    });
});

I've tryed to use the start event instead, but it work just at half: it hide the contents, but (i guess) just a second before, and the layout of them keep 'padded' as them are not hide..

I know that this is all except that clear, so i've made some screenshot:

Screenshot 1: the 'normal' situation with all the contents visibles, the contents aer in blue background Screenshot 2: what happen when the user start the drag'n'drop; all the contents get hidden, but the one that the user drag keep an height as its content is still shown (in orange the space i dont want to have) Screenshot 3: what i want to have when the user start to drag'n'drop the items

I've been able to do what i want by first click on another button (that hide all the contents), and then start the dragging.

Any idea?

Answer 1

You could try to use a double click to reveal the contents, it'd make your life much easier I think.... check out this demo.

$(document).ready(function(){
 $('#label-copy-list')
  .sortable()
  .find('.sort-header').dblclick(function(){
   $(this).find('.sort-hidden').toggle();
   return false;
  })
})

---

Update: I was messing around with the setup and if the sort-hidden is shown, it makes it a bit more cumbersome to sort. So, I added a mousedown event to hide it. So it ends up that you have to double click to reveal, but single click to hide (because it is assuming you are starting to sort).

$(document).ready(function(){
 $('#label-copy-list')
  .sortable()
  .find('.sort-header')
   .dblclick(function(){
    $(this).find('.sort-hidden').toggle();
    return false;
   })
   .bind('mousedown', function(){
    $(".sort-hidden").hide();
   })
}) 

---

Update #2: Hmm, ok how about we use jQuery's event.timeStamp? Updated demo

$(document).ready(function(){
    var last, diff,
        clickDelay = 500; // milliseconds
    $('#label-copy-list')
        .sortable()
        .find('.sort-header')
        .bind('mousedown', function(e){
            last = e.timeStamp;
        })
        .bind('mouseup', function(e){
            diff = e.timeStamp - last;
            if ( diff < clickDelay ) {
                $(this).find('.sort-hidden').toggle();
            }
        })
})