Draggable: cannot drag element inside iframe

[bgrins]

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.

[bgrins]

Test case: put into /demos/draggable to run

[bgrins]

Test case: put into /demos/draggable to run

[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.

[bgrins]

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

[bgrins]

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

[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.

[tobio85]

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

[ibleistift]

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

bgrins: Did you submit a pull request?

[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?

[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.

[Scott González]

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

[bgrins]

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

[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?

[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.

[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.

[Brian Grinstead]

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

Changeset: 24756a978a977d7abbef5e5bce403837a01d964f

[tj.vantoll]

#9594 is a duplicate of this ticket.

[Scott González]

#7039 is a duplicate of this ticket.

[Scott González]

#9993 is a duplicate of this ticket.