Delay before dragging in gridster

Question

I'm using gridster.net in project, and i've run into problem.

I'm trying to get widgets start dragging only after a second of holding mouse after click. I'm using the next code:

$(".gridster .gs-w").on('mousedown', function(e) {
    gridsterObj.disable();
    dragTimeout = setTimeout(function() {
        gridsterObj.enable();
    }, 500);
}).bind('mouseup mouseleave', function() {
    clearTimeout(dragTimeout);
});

but it didn't work. It seems that i have to call function of starting dragging, something like gridsterObj.on_start_drag.call(gridsterObj, e, ui);, but where can i get the UI object? It's used everywhere in gridster code, but i can't find where it created. It seems that it jquery UI object. How can i create it?

Answer 1

I've ended with the next code:

$(".gridster .gs-w").on('mousedown', function(e, data) {
    var self = this;

    if (!data || !data.start) {
        gridsterObj.disable();

        dragTimeout = setTimeout(function() {
            gridsterObj.enable();
            $(self).trigger(e, [{ start: true }]);
        }, 500);
    } else {
        $(self).addClass('dragging');
    }
}).bind('mouseup mouseleave', function() {
    clearTimeout(dragTimeout);
});

With that, gridster has delay 0.5 second before starting dragging.

Answer 2

You should be able to reference the UI object as $.ui or window.jQuery.ui.

So your code should look like this:

$(".gridster .gs-w").on('mousedown', function(e) {
    gridsterObj.disable();
    dragTimeout = setTimeout(function() {
        gridsterObj.enable();
        gridsterObj.on_start_drag.call(gridsterObj, $.ui);
    }, 500);
}).bind('mouseup mouseleave', function() {
    clearTimeout(dragTimeout);
});