Question

我使用NiceScroll使容器可以拖动。它本质上是一个被掩盖的时间表＆＃39; out，并且可以左右拖动以查看当天的更多内容。

我也在使用Fancybox，以便按计划弹出有关每个事件的更多信息。

当您拖动没有活动事件的计划区域时，一切都很好。当您开始拖动具有活动事件（.act）的区域时，当您释放拖动时，它将打开Fancybox。这是不希望的 - 我只是想停止拖动而不是打开Fancybox。

我可以在open或beforeLoad函数中使用哪种比较来取消盒子的实际打开吗？像mousedown位置离鼠标位置超过10px的东西？

以下是我对活动项目的代码：

$("#schedule .act").fancybox({
    openEffect:     'none',
    closeEffect:    'none',
    autoSize:       false,
    autoWidth:      false,
    autoHeight:     true,
    minHeight:      275,
    autoResize:     true,
    width:          500,
    padding:        [50, 60, 0, 60],
    arrows:         true,
    loop:           false,
    closeBtn:       '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;">Close</a>',

    beforeLoad: function() {        
        $time = $(this.element).data('time');
        $type = $(this.element).data('type');
        $titl = $(this.element).data('title');
        $desc = $(this.element).data('desc');
        this.content = "<span class='time " + $type + "'> " + $time + " </span>" + "<span class='title'>" + $titl + "</span>" + "<div class='desc'>" + $desc + "</div>";
    }
});

Answer 1

我明白了。困难的部分是让课程被删除。我尝试使用悬停状态，然后使用mouseleave，但是当拖动开始时，除非释放拖动，否则不会删除类（即使鼠标不在元素中）。我的解决方案是在初始化我的fancybox调用之前：

var clickDrag;
$("#schedule .act").mousedown(function() {
    $(this).addClass("hovered");
    clickDrag = $(this);
    $("#schedule .act").mousemove(function() {
        $(this).removeClass("hovered");
    });
});

然后，在fancybox调用中的beforeLoad中，我添加了：

if (!($(clickDrag).hasClass("hovered") ) ) {
    $.fancybox.cancel();
    return;
}

如果拖动则Fancybox不激活

1 个答案: