如何动态启用和禁用snap.js (by jakiestfu)

Question

我使用jquery动态启用或禁用snap.js，如下所示：

$(window).resize(function () {
    if ($(window).width() < 1024) {
        snapper.enable();
    } else {
        snapper.disable();
    }
});

但这似乎并不管用。我认为这与没有使用事件处理程序有关，但我不知道是如何做到的。

提前感谢！

编辑：

这似乎也不起作用：

addEvent(window, 'resize', function(){
     if ($(window).width() < 1024) {
        snapper.on('drag');
    } else {
        snapper.off('drag');
    }
    });

Answer 1

当视区大于1024px时，不要初始化snap.js。为什么要引用某个永远不会被使用的实例呢？

或者做：snapper.off('drag');

Answer 2

如何获取snapper变量？如果您在每次调整大小时执行新捕捉-这就是问题所在。您必须保存快照程序

Answer 3

我也遇到了这个问题(snapper.disable();似乎什么也做不了)，我发现唯一的方法是禁用，然后重新启用，快照导航是使用内置的忽略这一区域功能，然后使用css媒体查询来隐藏触发导航的按钮。

var snapper = new Snap({
    element: document.getElementById('content')
});

$(window).resize(function() {
    //initialise navigation
    if ($(window).innerWidth() >= 968) {
        $('body').attr('data-snap-ignore','true');
    } else {
        $('body').removeAttr('data-snap-ignore');
    }
});

这将禁用整个屏幕(但不是功能)的拖动，因此它实际上是隐藏的。