Jquery UI sortable – perform action BEFORE start event fires

draggablehelperjqueryjquery-uijquery-ui-sortable

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 dragging an element (a portlet div) in my sortable list, I need to perform some action BEFORE the actual drag process starts (From what I understand before the START event is fired).

To be more specific:
My DIVs provide the user with the possibility to extend/collapse it´s body (like in the example seem at the jquery UI page http://jqueryui.com/demos/sortable/#portlets).

Whenever dragging an element I´d like to trigger my collapse method so that the only visual element being dragged is the collapsed DIV.

However whenever I call my method (something like this)

$someitem.trigger("toggle.somenamespace")

it works as expected, except that the HEIGHT of the dragged helper gets calculated BEFORE the start event is fired in the sortable and therefore the helper has the height of the original element in its un-collapsed state.

My original thought on this was: as the sortable has e.g. the possibility the measure a drag distance before the actual drag procedure starts (with the option: distance) it should be possible hook into this flow, for example storing the original startDrag function (or whatever it is called) of the sortable widget in a temporary var, override it with a custom callback which first triggers my collapse functionality and then calls the original function to ensure that the height is calculated correctly.
However – I did not have much success with this approach so far…

Please note that setting CSS properties in the handlers for the drag or over an event of the sortable has not the desired effect, as the height the sortable widget calculated for the helper is set as element properties.

Or – probably someone knows a better way to affect the height of the helper being displayed during the drag process, it´s just my opinion that my original approach (changing the element before the drag process and then let the widget do its calculations the way it was intented) would be a better solution…

thanks for any assistance,
Matthias

EDIT:
Setting the sortable flag: forceHelperSize to true and setting the ui.item / helper size in the start draghandler does not work either, as it results in the desired effect visually (only the collapsed item is dragged, but stops the element from being dragged down all the way (as if the item would still have the height in its un-collapsed state)
tested with a helper: 'original' and 'clone'

Best Answer

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.

Related Topic