web-dev-qa-db-ja.com

IFrame上でドラッグ可能およびサイズ変更可能なJQuery（ソリューション）

最近、JQueryDraggableおよびResizableプラグインを使用していくつかの問題が発生しました。解決策を探して、私は多くの異なる場所でいくつかの非常に断片化されたコードを見つけ、最終的に私にとってほぼ完璧に機能するように見えるクリーンな解決策に提出しました。

彼らもこの問題に遭遇した場合、私は他の誰かのために私の発見を共有したいと思いました。

IFrameを含むdivがあります。このdivは、サイズ変更およびドラッグ可能である必要があります。非常に単純です-次のように、ドラッグ可能でサイズ変更可能なjqueryをdivに追加します。

$("#Div").draggable();
$("#Div").resizable();

Iframeを含む別のdivをドラッグするか、現在のiframeを移動して現在のdivのサイズを変更するまでは、すべて問題ありません。両方の機能は、iframeを超えると停止します。

解決：

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

楽しい！

PS：選択すると、他のドラッグ可能なオブジェクトの前面に表示されるウィンドウを作成するための追加のコード：

ドラッグ可能な開始機能で-

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) {
    if ($(element).css("z-index") > maxZ) {
        maxZ = $(element).css("z-index");
    }
});
$(this).css("z-index", maxZ + 1);
jqueryiframedraggableresizable
21
Bob

これを実現する方法はいくつかありますが、すべてニーズに応じて異なります。多くのウィンドウのサイズ変更/ドラッグを行うとUIの速度が大幅に低下するため、サイズ変更の開始時にiframeを非表示にし、ナビゲーションを支援するために境界線を付けてドラッグしました。

この機能の一部を実現するjqueryプラグインがいくつかありますが、多くはiframeと格闘しています。

前面への移動もポイントで改善でき、すべての状況で機能するとは限りません。

3
Bob

これを試して：

 $('#Div').draggable({ iframeFix: true });

これはうまくいくはずです。

16
vishal

私がやったことはdefinebody.dragging iframe {pointer-events: none;}次に、dragstartイベントでdraggingクラスを本体に追加し、dragendイベントで削除します。

ポインタイベントのCSSプロパティが2010年にすでに存在していたことがわかる限り、なぜそれが以前に言及されなかったのかはわかりませんが、私にとっては問題なく動作します。

4
stt

なぜそんなに難しいのですか？もっと美しい解決策があります：

  • iframeをいくつかのz-index、たとえば0を使用して相対div内に配置します
  • iframeも相対的にし、ドラッグ中にz-indexを-1に変更します。

コード：

$("#Div").draggable({
    start: function () {
        $("iframe").css('z-index', '-1');
    },
    stop: function () {
        $("iframe").css('z-index', '0');
    }
});
2
Dmitri

私も最初はバイロンコブのソリューションのようになりましたが、ダイアログ要素を使用していて、ダイアログが表示されているときにIframeが必要ないため（保存ダイアログです）、 モーダル オプションを使用するのが好きでした：

$('#savingDialog').dialog({
    modal: true
});
1
cbix