Opened 7 years ago

Closed 4 years ago

Last modified 3 years ago

#5727 closed bug (fixed)

Draggable: cannot drag element inside iframe

Reported by: bgrins Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.draggable Version: 1.8.2
Keywords: iframe, draggable, mouse Cc:
Blocked by: Blocking:

Description

I wanted to drag an element inside iframe, but be able to instantiate that from the parent document. Something like: $("iframe#test").contents().find("#draggable").draggable();

This used to throw errors and not work, but I was able to fix it pretty easily by updating calls from "document" to "ownerDocument" inside mouse.js, core.js, and draggable.js.

This change should not break existing code, since the ownerDocument of the element will just be "document" in a traditional situation (as far as I know).

Please see the test case, which was taken out of the development bundle /demos/ folder (copy the two html files into the folder and run it to see the problem).

If you do not feel this minor fix is necessary, that is fine - but it would make my ability to upgrade UI versions much easier (not having to manually patch the files every time), and may help someone else who is having this problem.

Attachments (2)

defaultIframe.html (931 bytes) - added by bgrins 7 years ago.
Test case: put into /demos/draggable to run
iframe.html (244 bytes) - added by bgrins 7 years ago.
Test case: put into /demos/draggable to run

Download all attachments as: .zip

Change History (22)

Changed 7 years ago by bgrins

Attachment: defaultIframe.html added

Test case: put into /demos/draggable to run

Changed 7 years ago by bgrins

Attachment: iframe.html added

Test case: put into /demos/draggable to run

comment:1 Changed 7 years ago by bgrins

I have the code to fix this issue, but since it is multiple files, it seems I cannot upload it over the github web interface, so I will need to download and learn how to use git before I can author the fix.

comment:2 Changed 7 years ago by bgrins

Committed to github: http://github.com/bgrins/jquery-ui/commit/c11cad4f538ba521a725174e12f5bf13c5fda7e9 Let me know if I need to do something more for this.

comment:3 Changed 7 years ago by bgrins

Are there any updates on this item? I see that it is still a problem in the latest 1.9 code base.

comment:4 Changed 7 years ago by nbt

I'd also love to see this fix in the next version. draggable and resizable items do not work inside an iframe when initialized from the parent document, this fix works great.

comment:5 Changed 6 years ago by tobio85

I'd love to see this bug fixed in the next version also. Any comment guys?

comment:6 Changed 6 years ago by ibleistift

This patch should be included in the official build...

bgrins: Did you submit a pull request?

Last edited 6 years ago by ibleistift (previous) (diff)

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

Milestone: TBD2.0.0

comment:8 Changed 5 years ago by bgrins

scott.gonzalez, if I were to pull down the latest code and submit a pull request with the updated patch from this case would it be accepted?

comment:9 Changed 5 years ago by Scott González

It depends on the complexity of the patch, but yes. Note that we now have this.document which is a jQuery object pointing to the correct document, so that should be used.

Last edited 5 years ago by Scott González (previous) (diff)

comment:10 Changed 5 years ago by mikesherov

Status: newopen

comment:11 Changed 5 years ago by Scott González

@bgrins are you still interested in submitting an updated PR for this?

comment:12 Changed 5 years ago by bgrins

Sure, sounds good. I'll send a pull request.

comment:13 Changed 5 years ago by bgrins

@scott.gonzalez I have a preliminary version of this working here: https://github.com/bgrins/jquery-ui/compare/5727. If you pull that branch down you can navigate to /jquery-ui/tests/visual/draggable/draggable_iframe.html to see a little demo page.

I also wanted to get some feedback about something before I commit it: https://gist.github.com/bgrins/4723365#file-ui-iframe-mouseup-js-L6. If you mouseup on the parent document it currently will not cancel it the next time a move fires (similar to the issue with IE on mousing out of the browser window). That extra condition in the gist solves that problem. Does this make sense?

comment:14 in reply to:  13 Changed 5 years ago by Scott González

Replying to bgrins:

I also wanted to get some feedback about something before I commit it: https://gist.github.com/bgrins/4723365#file-ui-iframe-mouseup-js-L6. If you mouseup on the parent document it currently will not cancel it the next time a move fires (similar to the issue with IE on mousing out of the browser window). That extra condition in the gist solves that problem. Does this make sense?

Yeah, that makes sense. I'd make the comment more generic, like "Handle when the mouseup occurrs in another frame." This won't actually work properly in Firefox or Opera, which both have event.which set to 1 when during a move with no buttons down, but it's certainly won't make the situation any worse in those browsers.

comment:15 Changed 5 years ago by Scott González

Can you send a pull request so that it's easier to comment on the code? I can't comment on a compare view, I'd need to find the specific commit for the line I want to comment on. Thanks.

comment:16 Changed 4 years ago by Brian Grinstead

Resolution: fixed
Status: openclosed

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

Changeset: 24756a978a977d7abbef5e5bce403837a01d964f

comment:17 Changed 4 years ago by mikesherov

Milestone: 2.0.01.11.0

comment:18 Changed 4 years ago by tj.vantoll

#9594 is a duplicate of this ticket.

comment:19 Changed 4 years ago by Scott González

#7039 is a duplicate of this ticket.

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

#9993 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.