Skip to main content

Search and Top Navigation

#7039 closed bug (duplicate)

Opened February 25, 2011 05:13PM UTC

Closed February 26, 2014 02:50PM UTC

Mouse: mouse events are incorrectly always bound to the calling document (breaks IFRAMEs)

Reported by: mririgo Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.mouse Version: 1.8.9
Keywords: haspatch Cc:
Blocked by: Blocking:
Description

I'm calling the draggable component from within an iFrame to an element on the iFrame's parent page. However, draggable does not work if providing a second selector argument.

$("#popup_container", top.document).draggable();

My expected behavior is the element #popup_container would be draggable. Using Firebug, I can see the class of "ui-draggable" is being applied to the element correctly. However, the element remains undraggable. I've tried all of the options on draggable, including helper, containment, iFrameFix, etc. to no avail.

I'm unable to use jsFiddle to make a test case because of the iFrame content.

Attachments (0)
Change History (6)

Changed December 09, 2011 06:12PM UTC by tj.vantoll comment:1

The reason this is happening is that in jquery.ui.mouse.js, the code references "document" directly 3 times, most importantly when it binds the mousemove and mouseup event handlers.

/* jquery.ui.mouse.js in the _mouseDown function */
$(document)
    .bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
    .bind('mouseup.'+this.widgetName, this._mouseUpDelegate);

In the context of your example, document will reference the iframe's document, when the node that you intend to make draggable is present in the parent document. Therefore, the mousemove & mouseups events will only be fired when the mouse is within the iframe. As a proof of concept, simply changing the 3 "$(document)" references to "$(top.document)" in jquery.ui.mouse.js makes your example scenario work as intended.

I think it would possible to figure which document the element is actually in and attach the events to that document. I'll try to look into this.

To work around this you could always use any pub/sub implementation to publish a method in the parent document and have the subscriber create the draggable. I could provide an example of that if you'd like.

Changed January 19, 2012 12:51AM UTC by pabloalmunia comment:2

_comment0: This a more stable solution (jquery.ui.mouse.js): \ \ Add this into _mouseInit \ \ \ {{{ \ this.document.mouseup( function( e ) { \ mouseHandled = false; \ }); \ }}} \ \ Replace in _mouseDown \ \ {{{ \ $(document) \ .bind('mousemove.'+this.widgetName, this._mouseMoveDelegate) \ .bind('mouseup.'+this.widgetName, this._mouseUpDelegate); \ }}} \ \ with \ \ {{{ \ this.document \ .bind('mousemove.'+this.widgetName, this._mouseMoveDelegate) \ .bind('mouseup.'+this.widgetName, this._mouseUpDelegate); \ }}} \ \ and replace in _mouseUp \ \ {{{ \ $(document) \ .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate) \ .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate); \ }}} \ \ with \ \ {{{ \ this.document \ .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate) \ .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate); \ }}}1327186192097805
_comment1: This a more stable solution (jquery.ui.mouse.js). \ \ You can see this changes in [https://github.com/jquery/jquery-ui/pull/581]1327186225132045

This a more stable solution (jquery.ui.mouse.js).

You can see this changes in https://github.com/pabloalmunia/jquery-ui/commit/63da9b6642e180e5f518a88c7a07a1e0c6e8f552

Changed October 11, 2012 02:49PM UTC by scottgonzalez comment:3

milestone: 1.9.02.0.0

Changed October 27, 2012 07:49PM UTC by mikesherov comment:4

_comment0: confirmed as described. No jsfiddle for the same reason as OP. This is a ui.1351367405650692
component: ui.draggableui.mouse
status: newopen
summary: Draggable doesn't work when 2nd argument is provided in selectorMouse: mouse events are incorrectly always bound to the calling document (breaks IFRAMEs)

confirmed as described. No jsfiddle for the same reason as OP. This is a ui.mouse issue, not a draggable issue.

Changed October 27, 2012 07:50PM UTC by mikesherov comment:5

keywords: → haspatch

Changed February 26, 2014 02:50PM UTC by scottgonzalez comment:6

resolution: → duplicate
status: openclosed

Duplicate of #5727.