7

この jsbin: http://jsbin.com/efosed/5/editをチェックアウトし、 「Run with JS」を押すと、jquery ui でサイズ変更できる div が表示されます。すべてが期待どおりに機能します。div は「フルスクリーン」iframe の上に配置されます。リンクされた例では、この iframe には次のものがありますdisplay: none。

に変更してdisplay: blockスクリプトを再実行すると、reziable プラグインが奇妙な動作をします。ここで試すことができます: http://jsbin.com/efosed/6/edit。マウス イベントを正しく処理しません。何が原因で、どうすれば修正できますか?

4

3 に答える 3

31

iframe を修正するには、独自のロジックを実装する必要があります。1 つの解決策は、iframe に div を追加することです。

デモ

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
            .css({
                width:'100%', height: '100%',
                position: "absolute", opacity: "0.001", zIndex: 1000
           })
            .appendTo("body");
      },
    stop: function(event, ui) {
        $('.ui-resizable-iframeFix').remove()
      }
  });
});

CSS プロパティ をサポートする最新のブラウザーpointer-eventsには、より良い解決策があります。コードと jsbin を参照してください。

デモ

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
});
于 2012-11-20T12:49:23.113 に答える
0

CSSのみの方法

.ui-resizable-resizing iframe { pointer-events: none; }

ui-resizable-resizing何かのサイズを変更するたびに、クラスが追加されます。

于 2016-08-24T19:11:21.000 に答える