Search code examples
javascriptjqueryjquery-uigridster

Delay before dragging in gridster


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?


Solution

  • 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.