Draggable: enabled draggable from within iframe. Fixed #5727 - draggable: cannot drag element inside iframe

Author: bgrins

tests/jquery.simulate.js

@@ -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 ) ) {

tests/unit/draggable/draggable_core.js

@@ -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 );

ui/jquery.ui.core.js

@@ -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() {

ui/jquery.ui.draggable.js

@@ -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
@@ -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;
@@ -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
@@ -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;
@@ -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;

ui/jquery.ui.mouse.js

@@ -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);
 		}
@@ -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();
 
@@ -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);
@@ -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;
@@ -144,6 +149,7 @@ $.widget("ui.mouse", {
 			this._mouseStop(event);
 		}
 
+		mouseHandled = false;
 		return false;
 	},