CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
Thang Pham
Thang Pham

Reputation: 38705

I want to disable drag for 500ms right after I drop

So when I reorder a list, as soon as I drop the item, it will submit the positions to my backend code, and reorder the list on the backend. However, I ran into case that if I reorder really really fast, the list on the front end and backend after a while is not sync anymore. So I want to disable the drag right after I drop for a brief moment to avoid race condition.

function reorder(panelId, type){
    $(escapeClientId(panelId)).sortable({
        start: function(event, ui){
            ui.item.startPos = ui.item.index();
        },
        stop: function(event, ui){
            //submit my start and end position to the server
            //change the cursor to wait
            $('body').css('cursor', 'wait');
            window.setTimeout(wait,600);                                    
        }
    });
    $(escapeClientId(panelId)).disableSelection();
}
function wait(){
    $('body').css('cursor', 'default');
}

As you can see, I change the cursor to wait cursor for 600ms, however even when the cursor is in the wait mode, it still allow the user to drag to reorder. Is there a way to completely disable the drag for a brief moment right after I drop?

Upvotes: 1

Views: 137

Answers (1)

Mario S
Mario S

Reputation: 11945

You can try using the disable and enable methods:

function reorder(panelId, type) {
    $(escapeClientId(panelId)).sortable({
        start: function (event, ui) {
            ui.item.startPos = ui.item.index();
        },
        stop: function (event, ui) {
            var panel = $(this), 
                body = $('body');

            panel.sortable("disable"); // Disable before submitting.
            body.css('cursor', 'wait');

            //submit my start and end position to the server
            //change the cursor to wait

            setTimeout(function () {
                body.css('cursor', 'default');
                panel.sortable("enable");
            }, 500); // Enable after 500 ms.
        }
    });
    $(escapeClientId(panelId)).disableSelection();
}

Upvotes: 2

Related Questions