Question

I have a list of items each with heavy content. When I apply jQuery sortable, what I wanted to achieve is this, when an item is dragged away and starts sorting, all the item contents will be hidden automatically.

From all my testtings, jQuery doesn’t accommodate such changes very well, for example, if I do the following,

$("#sortable").sortable({
    start: function(event, ui) {
        $(".hidden").addClass("hide");      
    }
});

jQuery can’t automatically figure out the sizes of hidden items and the sorting will be a mess.

So I solved it using an indirection, I firstly check mousedown, mouseup and mousemove event, and once dragging is detected (say when mousedown/mousemove for more than 50ms), I’ll hide the items immediately.

And in jQuery, I used some delay to start sorting.

var mouse_down = false;
var mouse_down_time;
var content_hidden;
$(".drag-handle").bind("mousedown", function(e) {
    mouse_down = true;
    mouse_down_time = e.timeStamp;
    $(".drag-handle").bind("mousemove", function(e) {
        if (mouse_down && !content_hidden) {
            if (e.timeStamp - mouse_down_time > 10) {
                $(".hidden").addClass("hide");
                content_hidden = true;
            }
        }
    });
}).bind("mouseup", function(e){
    $(".drag-handle").unbind("mousemove");
    mouse_down = false;
    if (content_hidden) {
        $(".hidden").removeClass("hide");
        content_hidden = false;
    }
});

$("#sortable").sortable({
    delay:100,
    stop: function(event, ui) {
        if (content_hidden) {
            $(".hidden").removeClass("hide");
            $(".drag-handle").unbind("mousemove");
            content_hidden = false;
        }
    }
});

So jQuery will start sorting after item contents are hidden.

Everything works fine except the helper offset. The helper offset seems to bump up for exactly the amount of spaces occupied by the all the item contents above the dragged item (which are hidden now during dragging).

So my question is,

is there a way to dynamically calculate all the item heights before and after hidden, and set the helper offset accordingly?

Thanks.

Answer 1

Well, problem solved.

What I did is dynamically calculate all the items height above the dragged item (before and after hiding contents), and then set the helper offset to the corresponding value by setting css:({‘top-margin’:offset_value+’px’})