Opened 9 years ago

Closed 6 years ago

#7039 closed bug (duplicate)

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.

Change History (6)

comment:1 Changed 8 years ago by 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.

comment:2 Changed 8 years ago by pabloalmunia

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

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

Last edited 8 years ago by pabloalmunia (previous) (diff)

comment:3 Changed 7 years ago by Scott González

Milestone: 1.9.02.0.0

comment:4 Changed 7 years ago by mikesherov

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.

Last edited 7 years ago by mikesherov (previous) (diff)

comment:5 Changed 7 years ago by mikesherov

Keywords: haspatch added

comment:6 Changed 6 years ago by Scott González

Resolution: duplicate
Status: openclosed

Duplicate of #5727.

Note: See TracTickets for help on using tickets.