Draggable: append divs to iframe parent for iframefix

This allows the blocking div to move with the iframe in
most situations, whereas appending to the body wouldn't.

Fixes #9671

diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index f724decbcfb7ffc793ce7dd277f258c629176e0b..46b80608cb149779e6078c6926b521261c574004 100644 (file)
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -1334,4 +1334,46 @@ test( "zIndex, default, switching after initialization", function() {
 
 });
 
+test( "iframeFix", function() {
+       expect( 5 );
+
+       var element = $( "<div>" ).appendTo( "#qunit-fixture" ).draggable({ iframeFix: true }),
+               element2 = $( "<div>" ).appendTo( "#qunit-fixture" ).draggable({ iframeFix: ".iframe" }),
+               iframe = $( "<iframe>" ).appendTo( element );
+
+       element2
+               .append( "<iframe class='iframe'></iframe>" )
+               .append( "<iframe>" );
+
+       iframe.css({
+               width: 1,
+               height: 1
+       });
+
+       element.one( "drag", function() {
+               var div = $( this ).children().not( "iframe" );
+               // http://bugs.jqueryui.com/ticket/9671
+               // iframeFix doesn't handle iframes that move
+               equal( div.length, 1, "blocking div added as sibling" );
+               equal( div.outerWidth(), iframe.outerWidth(), "blocking div is wide enough" );
+               equal( div.outerHeight(), iframe.outerHeight(), "blocking div is tall enough" );
+               deepEqual( div.offset(), iframe.offset(), "blocking div is tall enough" );
+       });
+
+       element.simulate( "drag", {
+               dx: 1,
+               dy: 1
+       });
+
+       element2.one( "drag", function() {
+               var div = $( this ).children().not( "iframe" );
+               equal( div.length, 1, "blocking div added as sibling only to matching selector" );
+       });
+
+       element2.simulate( "drag", {
+               dx: 1,
+               dy: 1
+       });
+});
+
 })( jQuery );

diff --git a/ui/draggable.js b/ui/draggable.js
index ebafaeb83347ddcb63c9ed6e2d233071eba241e7..997bba107b1b00a0202a6bf5557dc875b2190032 100644 (file)
--- a/ui/draggable.js
+++ b/ui/draggable.js
@@ -109,20 +109,32 @@ $.widget("ui.draggable", $.ui.mouse, {
                        return false;
                }
 
-               $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
-                       $("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
-                       .css({
-                               width: this.offsetWidth + "px", height: this.offsetHeight + "px",
-                               position: "absolute", opacity: "0.001", zIndex: 1000
-                       })
-                       .css($(this).offset())
-                       .appendTo("body");
-               });
+               this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix );
 
                return true;
 
        },
 
+       _blockFrames: function( selector ) {
+               this.iframeBlocks = this.document.find( selector ).map(function() {
+                       var iframe = $( this );
+
+                       return $( "<div>" )
+                               .css( "position", "absolute" )
+                               .appendTo( iframe.parent() )
+                               .outerWidth( iframe.outerWidth() )
+                               .outerHeight( iframe.outerHeight() )
+                               .offset( iframe.offset() )[ 0 ];
+               });
+       },
+
+       _unblockFrames: function() {
+               if ( this.iframeBlocks ) {
+                       this.iframeBlocks.remove();
+                       delete this.iframeBlocks;
+               }
+       },
+
        _blurActiveElement: function( event ) {
                var document = this.document[ 0 ];
 
@@ -297,10 +309,7 @@ $.widget("ui.draggable", $.ui.mouse, {
        },
 
        _mouseUp: function( event ) {
-               //Remove frame helpers
-               $("div.ui-draggable-iframeFix").each(function() {
-                       this.parentNode.removeChild(this);
-               });
+               this._unblockFrames();
 
                //If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
                if ( $.ui.ddmanager ) {