jQuery UIのSortableとModaalを一緒に使うとFirefoxで不具合が起きた・・・

jQuery UIのSortableとModaalを一緒に使うとFirefoxで不具合が起きた・・・

今年も順調に夏バテ中です。yanagimachiです。

さて、このバシャログ。を運営するシーブレインでは、毎年夏に夏グリーティングをしています。いわゆる暑中見舞い的なやつです。
今回その作成をデザイン:gami、コーディング:私yanagimachiで行ったのですが、Firefoxで表題の問題が起きてしまいました。

PCで2017年の夏グリーティングを見てみると、わかるのですが

  • ドラッグ&ドロップで並び替えを行う(jQuery UIのSortable
  • クリックでモーダルを立ち上げる(Modaal

というjQueryプラグインを使っています。
ところがなぜかFirefoxだけドラッグ&ドロップをしたときにモーダルが立ち上がってしまっていました。

当初、ドラッグ&ドロップする要素とクリックする要素を一緒にしていたので、そのせいかなぁと思っていたのですが別にしても同じ現象が起きてしまいました。

//modaal モーダル
$('.entry').modaal({ //.entryをクリックするとモーダルを立ち上げる
    type: 'image',
    overlay_opacity: 0.3,
    background_scroll: true
});

//並び替え
var $sort = $('#entry-list');
var option = {
    stop: function(event, ui){
        var text = '';
        $sort.find('.entry').each(function(){ //並び替えた際のメッセージを取得
            text += $(this).data('text');
        });

        setTimeout(function(){
            if (text == '****') { //メッセージが****の場合、社長のモーダルを立ち上げる
                $('.btn-message')[0].click();
            }

        }, 100);
    }
}
$sort.sortable(option);
$sort.disableSelection();

【解決】Sortableでドラッグ&ドロップをした際に、Modaalの処理を消す

//modaal モーダル
$('.entry').modaal({ //.entryをクリックするとモーダルを立ち上げる
    type: 'image',
    overlay_opacity: 0.3,
    background_scroll: true
});

//並び替え
var $sort = $('#entry-list');
var option = {
    stop: function(event, ui){
        var text = '';
        $sort.find('.entry').each(function(){ //並び替えた際のメッセージを取得
            text += $(this).data('text');
        });

        setTimeout(function(){
            $('.entry').modaal('close'); //Modaalの処理を消す
            if (text == '****') { //メッセージが****の場合、社長のモーダルを立ち上げる
                $('.btn-message')[0].click();
            }

        }, 100);
    }
}
$sort.sortable(option);
$sort.disableSelection();

まとめ

最近MODAALをよく使っているので、なんとか自力で修正ができました。
似たような現象が起きたとき、ぜひ参考にしてくださいね!
なぜか井上陽水さんの「少年時代」を思い浮かべながら作業していたyanagimachiでした。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ