jQuery mousedown 函数回调（类似回调的回调）

Question

关于 jQuery 可拖动（在 jQuery-ui 一个巨大的库中）

我通过 Google 搜索找到了这个替代更小的片段：

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

以防万一link死在这里是代码：

(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);

它看起来像它缺少熟悉的 jquery-ui 事件：start、move、stop。我正在考虑一种可以将它们添加到代码中的方法。我想;在每个

的末尾都有一个回调

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

类似

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

但是，我将如何通过事件传递回调？

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

我只是不知道如何引用 this.start()，因为它对我来说并不像可以使用普通回调函数设置事件那样。我的想法是； mousedown 的事件函数本身就是一个回调，所以我似乎必须传递第二个回调，这会导致 draggable.start

如何将动态回调传递给事件函数？

我找到了这个库 http://draggabilly.desandro.com/，它有事件开始拖动停止。

但我还是很想知道是否可以通过事件动态传递回调..

Answer 1

npm 安装https://www.npmjs.com/package/draggy

然后使用 --s 进行 browserify 使变量可见，如果你想让它变小，则使用 uglify 来缩小它

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

然后在您的客户端中 html

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

然后在脚本中使用变量

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

:D

jQuery mousedown 函数回调（类似回调的回调）

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

jquery

callback

draggable