Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.jQuery UI is currently not touch-compatible. Using the jQuery methods for draggable(), sortable(), droppable(), etc all do not currently have any support on touch devices. Currently we only have a few places in core that actually utilize jQuery UI: Dialogs in views and the CMI diff interface, and the drag and drop toolbar configuration for CKEditor.
jQuery UI *will* eventually support touch events natively. It's planned for jQuery UI 1.13 (that's 3 releases away from the current version)in the jQuery UI Roadmap. When that happens, places that use jQuery UI will immediately become touch-compatible.
Until then, if we want to make jQuery UI touch compatible the easiest approach is installing Touch Punch, a miniscule library that essentially tricks jQuery UI into supporting touch events.
I'm not sure if we should go forward with this immediately or just wait it out for jQuery UI 1.13. In any case, this patch adds Touch Punch and uses it on CKEditor admin interface to demonstrate its functionality. The nice thing is if we decided to get rid of it later, removal is should be just as simple as deleting it.
| Comment | File | Size | Author |
|---|---|---|---|
| touch_punch.patch | 2.78 KB | quicksketch | |
Comments
Comment #1
quicksketchWe might also consider if we just want to make jQuery UI (or some parts of it) depend on Touch Punch directly instead of adding it on an a-la-carte basis. Right now I've added it as a dependency for ckeditor.admin, but it could just be added everywhere instead.
Comment #2
Wim Leers#1 sounds sensible to me.
Comment #3
Wim LeersComment #4
jessebeach CreditAttribution: jessebeach commentedWe should coordinate solutions between this issue and #1261002: Draggable tables do not work on touch screen devices.
Comment #5
Bojhan CreditAttribution: Bojhan commentedWait, what? I agree with jesse that this needs some coordination, we don't want one-off libraries, only for CKEditor.
Comment #6
quicksketchPlease actually read the issue summary. This would affect all places where we use jQuery UI for draggables, not just CKEditor.
As noted in #1261002: Draggable tables do not work on touch screen devices a couple of times now, tabledrag.js is not and cannot be based on jQuery UI, because jQuery UI does does not support table rows (and it can't) because of requirements of how the DOM works (you can't take a table row out of its parent table in any sane way). The only options for tabledrag are either to A) specifically write touch support for tabledrag.js or B) find a different UI solution instead of using tables at all that could leverage jQuery UI. So basically I think this issue is entirely separate from #1261002: Draggable tables do not work on touch screen devices. We need a generic solution for jQuery UI (that's what this issue is) and we need a specific solution for tabledrag.js (that's what the other issue is).
Comment #7
jessebeach CreditAttribution: jessebeach commentedThis is definitely a problem of the blocks UI, but we might get around this by rendering the HTML as a something other than a table and just styling to be table-like in presentation.
In any case, I just wanted to make sure we're cross-linking issues that may be related.
Comment #8
sunGiven the recent direction of #1261002: Draggable tables do not work on touch screen devices, is this issue still relevant?
In case it is, adding a default library for this seems sensible.
I don't know whether Touch Punch is the best library though, as I'm not familiar with available libraries in that space. The issue summary does not clarify which other libraries were evaluated.
Comment #9
quicksketchYes, this issue is still relevant. Touch Punch essentially is the same basic idea as #1261002: Draggable tables do not work on touch screen devices: it makes touch events emulate mouse events. As far as I know, Touch Punch is the best solution for jQuery UI. Unlike tabledrag.js, we can't modify jQuery UI directly, so it has to be amended by an add-on JS file.
Comment #10
sunComment #11
webchickDries normally likes to sign off on these.
Comment #12
webchickOk, demoed this to Dries and he's a fan. :)
Committed and pushed to 8.x. Thanks!
Comment #13
quicksketchWow, it's not often you get a 1-patch directly into core!
I wanted to bring back up my first comment for future integrations:
So basically what this patch has done is make the CKEditor admin interface touch-compatible, but not anything else that uses jQuery UI (e.g. our modals in the diff interface). It might be better to just add touch punch everywhere we add the jQuery UI draggable.js library, so each library doesn't need to specify the dependency manually.
Comment #14
webchickUh, not sure how I missed marking this fixed earlier.
Might be a good idea to file a follow-up for #13.
Comment #15.0
(not verified) CreditAttribution: commentedClarifying removal