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

JavaScript

2017.07.18

今年も順調に夏バテ中です。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();