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 comment:1
Changed January 19, 2012 12:51AM UTC by 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 comment:3
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed October 27, 2012 07:49PM UTC by comment:4
| _comment0: | confirmed as described. No jsfiddle for the same reason as OP. This is a ui. → 1351367405650692 |
|---|---|
| component: | ui.draggable → ui.mouse |
| status: | new → open |
| summary: | Draggable doesn't work when 2nd argument is provided in selector → Mouse: 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 comment:5
| keywords: | → haspatch |
|---|
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.