Jquery UI sortable - perform action BEFORE start event fires

Question

I have searched STACKOVERFLOW and other forums for the solution to my problem - if I have missed a working solution please point me towards it.

My Problem: Whenever drag

Answer 1

I've searched a long time for this "solution":

$('.handle').each(function() {
    $(this).mousedown(function() {
        $(this).parent().parent().children('ol').hide('blind', 500);
    });
});

You can trigger a event by mousedowning the handle and hide whatever you want. Then set the option delay of the sortable to a value greater than the duration of the hiding animation, in my example 501.

It's not a elegant solution, but it works - at least in my program.

Answer 2

You can do this, but it's not future proof for upcoming versions of jQuery UI:

var oldMouseStart = $.ui.sortable.prototype._mouseStart;
$.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
   this._trigger("CustomBeforeStart", event, this._uiHash());
   oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

You can then use the new event when setting up the sortable:

$(".whatever").sortable({
  "CustomBeforeStart":function(e, ui) {
  }
  ...
});