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

Show:
Oliver Tacke
September 15, 2020, 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?

Oliver Tacke
September 29, 2020, 7:12 AM

Fix proposed in as discussed on Slack recently

Assignee

Unassigned

Reporter

Bienvenido Villadelrey

Labels

None

Funding

None

Code reviewer

None

Released

None

Time tracking

0m

Fix versions

None

Sprint

None

Priority

Medium
Configure