javascript tooltip - jQuery UIのダイアログのドラッグの問題




enable dialog (6)

私は、私たちの製品の1つにjQuery UI(jquery-ui-1.10.3)ダイアログプラグインを使用し、可能性のある「問題」を発見しました。ホスティングページが小さいか、ホスティングページの現在のビューが一番上にスクロールされると、開いているダイアログボックスをドラッグすると、期待どおりの動作をします。 この問題は、大きなページでダイアログをホストするときに表示されます。このページは、上部ではなくどこかにスクロールされます。この場合、ダイアログボックスがドラッグ中にジャンプし始めます。 それはIE 9と最新のFirefox(21.0)の両方に起こります。

ページは動的に生成され、複雑であり、長い必要があります。 私はフィドルに慣れていませんが、私は使用できるjQuery-ui libオプションのオプションがないようです。

具体的には、ホスティングページを100px下にスクロールすると(ホスティングページの上位100pxがブラウザウィンドウの上端に「フィード」されている)、マウスをたどるのではなくダイアログをドラッグすると、マウスキャプチャから外れるように100ピクセル下にジャンプします。

このダイアログは、

$(element).dialog({ 
    autoOpen: false, width: 950, height: 820, 
    modal: false, resizable: true, draggable: true
});

私の質問は:1)誰か他の人に同じ問題がありますか? 2)そうなら、これは設定上の問題かバグでしょうか?

ここの専門家が私を助けることができますか?


Answers

私は同じ問題を抱えていましたが、ページ上のコンテンツは自動的に生成されます。 それは非常に長いです。

html, body {position: relative}は問題を解決します。


バグレポートバグレポートを見る

このバグを修正する私の解決策は、 "ui.position.top"(私にとっては228px)を "リセット"することです。

$(element).dialog({
    dragStart: function(event, ui) {
        var fixPix = 228; // offset top (add your own here!)
        iObj = ui.position;
        if (iObj.top > fixPix) {
            iObj.top = iObj.top - fixPix;
        }
        ui.position = iObj;
    }
});

私のバージョン:jQuery UI - v1.10.4 - 2014-01-17

このソリューションは私のために働く。 この醜いバグが修正されるまで、あなたに役立つことを願っています。



このバグを修正する私の解決策は、Dadoと似ていますが、ドラッグイベントを使用しています:

        $(element).dialog({
            draggable: true,
            drag: function(event, ui) {
                var fixPix = $(document).scrollTop();
                iObj = ui.position;
                iObj.top = iObj.top - fixPix;
                $(this).closest(".ui-dialog").css("top", iObj.top + "px");
            }
        });

私のバージョン:jQuery UI - v1.10.3 - 2013-10-10


OK、これはjQuery-ui 1.10.3のバグだとわかりました。こちらをご覧ください

これは、UI 1.10.3を使用する場合、およびスクロールバーがFirefox、Opera、IE8の最上部にない場合にのみ表示されます。

Chromeでは正常に動作し、他のブラウザでも1.10.2で動作します。

UIダイアログのデモページにもこのバグがあります:

スクロールバーが下にスクロールダウンするまで、ダイアログを下にドラッグしてダイアログを下にドラッグします。 ダイアログがオフセットと一緒にダウンする


これはおそらく最も簡単で簡単な解決策です。

$(".myCheckBox")[0].checked = true;

または

$(".myCheckBox")[0].checked = false;

さらに短くなる:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

ここにjsFiddleもあります。







javascript jquery-ui