Question

In my draggables, the code at start: and stop: is getting too big (50-100 lines) that I am starting to have readability issues.

$(".dra").draggable({
    revert: "invalid",
    start: function(ev, ui){
        //...50-100 lines...
    },
    stop: function(ev, ui){
        //...50-100 lines...
    }
});

To fix the readability, I want to create two global functions startDrag() and stopDrag() and just insert them like start: startDrag(ev, ui). But I failed managed to make this work:

function startDrag(ev, ui){
    //...50-100 lines...
}

function stopDrag(ev, ui){
    //...50-100 lines...
}

function createDraggables(){
    $(".dra").draggable({
        revert: "invalid",
        start: startDrag(ev, ui),
        stop: stopDrag(ev, ui)
    });
}

Any ideas why this isn’t working?

Answer 1

Because of function scope, could be just write like this:

function createDraggables(){
    $(".dra").draggable({
        revert: "invalid",
        start: startDrag,
        stop: stopDrag
    });
}