Skip to content

Commit

Permalink
Draggable: enabled draggable from within iframe. Fixed #5727 - dragga…
Browse files Browse the repository at this point in the history 
…ble: cannot drag element inside iframe
  • Loading branch information
@bgrins @mikesherov
bgrins authored and mikesherov committed May 21, 2013
1 parent 433ef9d commit 24756a9
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 15 deletions.
2 changes: 1 addition & 1 deletion tests/jquery.simulate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@ $.extend( $.simulate.prototype, {
clientY: Math.round( y )
};

this.simulateEvent( document, "mousemove", coord );
this.simulateEvent( target.ownerDocument, "mousemove", coord );
}

if ( $.contains( document, target ) ) {
Expand Down
16 changes: 16 additions & 0 deletions tests/unit/draggable/draggable_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,4 +169,20 @@ test( "#5009: scroll not working with parent's position fixed", function() {
});
});

test( "#5727: draggable from iframe" , function() {
expect( 2 );

var iframe = $( "<iframe id='iframe-draggable-container' src='about:blank'></iframe>" ).appendTo( "#qunit-fixture" ),
iframeBody = iframe.contents().find( "body" ).append(
"<div id='iframe-draggable-1' style='background: green; width: 200px; height: 100px;'>Relative</div>"
),
draggable1 = iframeBody.find( "#iframe-draggable-1" );

draggable1.draggable();

equal( draggable1.closest( iframeBody ).length, 1 );

TestHelpers.draggable.shouldMove( draggable1 );
});

})( jQuery );
2 changes: 1 addition & 1 deletion ui/jquery.ui.core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ $.fn.extend({
}).eq(0);
}

return (/fixed/).test(this.css("position")) || !scrollParent.length ? $(document) : scrollParent;
return ( /fixed/ ).test( this.css( "position") ) || !scrollParent.length ? $( this[ 0 ].ownerDocument || document ) : scrollParent;
},

uniqueId: function() {
Expand Down
16 changes: 10 additions & 6 deletions ui/jquery.ui.draggable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,8 @@ $.widget("ui.draggable", $.ui.mouse, {
_getParentOffset: function() {

//Get the offsetParent and cache its position
var po = this.offsetParent.offset();
var po = this.offsetParent.offset(),
document = this.document[ 0 ];

// This is a special case where we need to modify a offset calculated on start, since the following happened:
// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
Expand Down Expand Up @@ -383,7 +384,8 @@ $.widget("ui.draggable", $.ui.mouse, {
_setContainment: function() {

var over, c, ce,
o = this.options;
o = this.options,
document = this.document[ 0 ];

if ( !o.containment ) {
this.containment = null;
Expand Down Expand Up @@ -444,6 +446,7 @@ $.widget("ui.draggable", $.ui.mouse, {
}

var mod = d === "absolute" ? 1 : -1,
document = this.document[ 0 ],
scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== document && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent;

//Cache the scroll
Expand Down Expand Up @@ -472,6 +475,7 @@ $.widget("ui.draggable", $.ui.mouse, {

var containment, co, top, left,
o = this.options,
document = this.document[ 0 ],
scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== document && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent,
pageX = event.pageX,
pageY = event.pageY;
Expand Down Expand Up @@ -778,17 +782,17 @@ $.ui.plugin.add("draggable", "opacity", {

$.ui.plugin.add("draggable", "scroll", {
start: function( event, ui, i ) {
if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
if( i.scrollParent[ 0 ] !== i.document[ 0 ] && i.scrollParent[ 0 ].tagName !== "HTML" ) {
i.overflowOffset = i.scrollParent.offset();
}
},
drag: function( event, ui, i ) {

var o = i.options,
scrolled = false;

if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
scrolled = false,
document = i.document[ 0 ];

if( i.scrollParent[ 0 ] !== document && i.scrollParent[ 0 ].tagName !== "HTML" ) {
if(!o.axis || o.axis !== "x") {
if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed;
Expand Down
20 changes: 13 additions & 7 deletions ui/jquery.ui.mouse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $.widget("ui.mouse", {
_mouseDestroy: function() {
this.element.unbind("."+this.widgetName);
if ( this._mouseMoveDelegate ) {
$(document)
this.document
.unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
.unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
}
Expand Down Expand Up @@ -99,9 +99,10 @@ $.widget("ui.mouse", {
this._mouseUpDelegate = function(event) {
return that._mouseUp(event);
};
$(document)
.bind("mousemove."+this.widgetName, this._mouseMoveDelegate)
.bind("mouseup."+this.widgetName, this._mouseUpDelegate);

this.document
.bind( "mousemove." + this.widgetName, this._mouseMoveDelegate )
.bind( "mouseup." + this.widgetName, this._mouseUpDelegate );

event.preventDefault();

Expand All @@ -114,6 +115,10 @@ $.widget("ui.mouse", {
if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
return this._mouseUp(event);
}
// Iframe mouseup check - mouseup occurred in another document
else if ( !event.which ) {
return this._mouseUp( event );
}

if (this._mouseStarted) {
this._mouseDrag(event);
Expand All @@ -130,9 +135,9 @@ $.widget("ui.mouse", {
},

_mouseUp: function(event) {
$(document)
.unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
.unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
this.document
.unbind( "mousemove." + this.widgetName, this._mouseMoveDelegate )
.unbind( "mouseup." + this.widgetName, this._mouseUpDelegate );

if (this._mouseStarted) {
this._mouseStarted = false;
Expand All @@ -144,6 +149,7 @@ $.widget("ui.mouse", {
this._mouseStop(event);
}

mouseHandled = false;
return false;
},

Expand Down

1 comment on commit 24756a9

@johnnyshields
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mikesherov in jquery.ui.mouse.js, these lines break draggable on iPad (using touch punch plugin):

    // Iframe mouseup check - mouseup occurred in another document
    else if ( !event.which ) {
      return this._mouseUp( event );
    }

Please sign in to comment.