Fancybox не активировать при перетаскивании

Question

Я использую NiceScroll, чтобы сделать контейнер перетаскиваемым. По сути, это расписание, «замаскированное», и его можно перетащить влево и вправо, чтобы увидеть больше дня.

Я также использую Fancybox, чтобы вывести дополнительную информацию о каждом событии в расписании.

Когда вы перетаскиваете область расписания, у которой нет активного события, все в порядке. Когда вы начинаете перетаскивать область с активным событием (.act), когда вы отпускаете перетаскивание, он открывает Fancybox. Это нежелательно - я просто хотел бы прекратить перетаскивание и не открывать Fancybox.

Есть ли какое-то сравнение, которое я могу использовать в функции open или beforeLoad, которую я могу использовать для отмены фактического открытия окна? Что-то вроде, если позиция мускулатуры больше, чем на 10 пикселей от позиции мыши?

Вот код, у меня есть для активных элементов:

$("#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"); 
    }); 
}); 

И затем, внутри beforeLoad в вызове FancyBox, я добавил:

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