Question

关于jQuery draggable（在jQuery-ui中是一个巨大的库）

我在Google搜索中找到了这个替代较小代码段：

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

以防链接在此处死亡是代码：

(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进行浏览以使变量可见，并使用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函数回调（就像一个回调的回调）

1 个答案: