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

[mririgo]

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.

[tj.vantoll]

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.

[pabloalmunia]

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

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

[mikesherov]

confirmed as described. No jsfiddle for the same reason as OP. This is a ui.

[Scott González]

Duplicate of #5727.