mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-10-05 01:44:18 +00:00
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
This commit is contained in:
parent
df7e32fe37
commit
c7bec85cfa
@ -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 );
|
})( jQuery );
|
||||||
|
@ -109,20 +109,32 @@ $.widget("ui.draggable", $.ui.mouse, {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
|
this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix );
|
||||||
$("<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");
|
|
||||||
});
|
|
||||||
|
|
||||||
return true;
|
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 ) {
|
_blurActiveElement: function( event ) {
|
||||||
var document = this.document[ 0 ];
|
var document = this.document[ 0 ];
|
||||||
|
|
||||||
@ -297,10 +309,7 @@ $.widget("ui.draggable", $.ui.mouse, {
|
|||||||
},
|
},
|
||||||
|
|
||||||
_mouseUp: function( event ) {
|
_mouseUp: function( event ) {
|
||||||
//Remove frame helpers
|
this._unblockFrames();
|
||||||
$("div.ui-draggable-iframeFix").each(function() {
|
|
||||||
this.parentNode.removeChild(this);
|
|
||||||
});
|
|
||||||
|
|
||||||
//If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
|
//If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
|
||||||
if ( $.ui.ddmanager ) {
|
if ( $.ui.ddmanager ) {
|
||||||
|
Loading…
Reference in New Issue
Block a user