1

コンテナをドラッグ可能にするためにNiceScrollを使用しています。これは基本的に「マスク」されたスケジュールであり、左右にドラッグして 1 日の詳細を表示できます。

また、スケジュールの各イベントに関する詳細情報をポップアップ表示するために、 Fancyboxを使用しています。

アクティブなイベントがないスケジュールの領域をドラッグすると、すべて問題ありません。アクティブなイベント (.act) がある領域でドラッグを開始すると、ドラッグを離すと Fancybox が開きます。これは望ましくありません。ドラッグをやめて、Fancybox を開かないようにしたいだけです。

ボックスの実際の開封をキャンセルするために使用できる open または beforeLoad 関数で使用できる何らかの比較はありますか? マウスダウン位置がマウスアップ位置から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>";
    }
});
4

1 に答える 1

1

わかった。大変だったのは、クラスを削除することでした。ホバー状態を使用してからマウスリーブを使用しようとしましたが、ドラッグを開始すると、ドラッグが解放されるまでクラスが削除されませんでした (マウスが要素から離れていても)。私の解決策は、私の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;
}
于 2013-04-04T18:22:51.563 に答える