jQuery mousedown function callback (like a callback of a callback)

Question

Regarding jQuery draggable (in jQuery-ui a huge library)

I found this alternative smaller snippet with a Google search:

https://gist.github.com/Arty2/11199162

Just in case the link dies here is the code:

(function($) {
    if (!jQuery().draggable) {
        $.fn.draggable = function() {
            this
                .css('cursor', 'move')
                .on('mousedown touchstart', function(e) {
                    var $dragged = $(this);

                    var x = $dragged.offset().left - e.pageX,
                        y = $dragged.offset().top - e.pageY,
                        z = $dragged.css('z-index');

                    if (!$.fn.draggable.stack) {
                        $.fn.draggable.stack = 999;
                    }
                    stack = $.fn.draggable.stack;

                    $(window)
                        .on('mousemove.draggable touchmove.draggable', function(e) {
                            $dragged
                                .css({'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s', 'bottom': 'auto', 'right': 'auto'})
                                .offset({
                                    left: x + e.pageX,
                                    top: y + e.pageY
                                })
                                .find('a').one('click.draggable', function(e) {
                                    e.preventDefault();
                                });

                            e.preventDefault();
                        })
                        .one('mouseup touchend touchcancel', function() {
                            $(this).off('mousemove.draggable touchmove.draggable click.draggable');
                            $dragged.css({'z-index': stack, 'transform': 'scale(1)'})
                            $.fn.draggable.stack++;
                        });

                    e.preventDefault();
                });
            return this;
        };
    }
})(jQuery);

It looks like it is missing the familiar events of jquery-ui: start, move,stop. I am thinking of a way in which I can add them to the code. I figure; with a callback on the end of each of

'mousedown touchstart'                     //this.start()
'mousemove.draggable touchmove.draggable'  //this.drag()
'mouseup touchend touchcancel'             //this.stop()

Something like

this.start=function(){/*do whatever*/};
this.drag=function(){/*do whatever*/};
this.stop=function(){/*do whatever*/};

But, How would I go about passing in the callbacks through the events?

.on('mousedown touchstart', function(e, callback) { //that would not work!

I just don't see how I can make a reference to this.start(), as it doesn't seam to me like the events can be set up with a normal callback function. My thought is; That the event function for mousedown is a callback in-it's-self so it would seem that I would have to pass in a second callback that would lead to draggable.start

How is passing a dynamic callback to event function done?

---

I found this library http://draggabilly.desandro.com/ which has events start drag stop.

But I still really would like to know If I can pass a callback dynamically through an event..

Answer 1

npm Install https://www.npmjs.com/package/draggy

then browserify with --s to make the variable visible and uglify to minify it if you want it small

browserify draggy/index.js --s Draggable | uglifyjs -c > draggy.js

then in your client html

<srcipt type="text/javascript" src="draggy.js"></script>

and then use the variable in your script

Draggable(document.getElementById('whatever'));//could also add options, but whatever..

:D