Drag and Drop - not working on Windows touch screens

Description

Drag and Drop does not work on Windows touch screen.

Issue reported here: https://h5p.org/node/923301

Issue was tested on https://h5p.org/drag-and-drop

Environment

XPS 13 with touch screen
Latest Chrome and Windows 10 version

Acceptance Criteria

None

Activity

Former user September 29, 2020 at 7:12 AM

Fix proposed in as discussed on Slack recently

Former user September 15, 2020 at 11:24 AM

Some findings:

  • This seems to be a problem with Chrome on Windows on devices with a touch display.

  • The source of the problem resides in the use of the Draggable/Droppable elements of jQueryUI, more specifically in the Touch Punch patch used to add drag-and-drop support to jQueryUI.

  • document.ontouchend is not set, leading the Touch Punch patch of jQueryUI to believe there’s no touch support in https://github.com/h5p/jquery-ui/blob/master/h5p-jquery-ui.js#L15009-L15014.

  • Option #1: Removing the check for touch devices (in https://github.com/h5p/jquery-ui/blob/master/h5p-jquery-ui.js#L15011-L15014) fixes the issue, but will also bind the touch events to jQuery’s mouse events on devices without touch support. This doesn’t seem to cause problems on platforms without touch support, because no touch events will happen - but this may still only be a hot fix.

  • Option #2: This fork of the Touch Punch patch to jQueryUI seems to fix the issue as well: Replacing the patch in https://github.com/h5p/jquery-ui/blob/master/h5p-jquery-ui.js#L14996-L15156 with the fork should do the trick then, too.

  • Option #3: The Draggable/Droppable elements of jQueryUI are (only) used by Drag and Drop and Drag the Words (+ Slider used by Interactive Video), so rewriting those to use drag/drop events might allow to get rid of the jQueryUI dependency alltogether - taking more time, of course, as this might open the door for other problems.

Does the H5P core team think option #1 or #2 is acceptable (#3 rather being a small project in itself beyond fixing the problem) for a pull request?

Done

Details

Assignee

Reporter

Priority

Created June 23, 2020 at 8:11 PM
Updated March 24, 2022 at 7:48 AM
Resolved March 24, 2022 at 7:48 AM