Cms: Drag-and-drop to support touch devices

[carlcs]

Modern touch devices have good HTML5 drag-and-drop support, implementation such as https://github.com/RubaXa/Sortable work very well actually.

It would be nice if Craft’s drag-and-drop implementation would be updated to support touch devices.

See related issue about re-ordering Matrix blocks, or editing Field Layouts on touch devices:
https://github.com/craftcms/cms/issues/1035

[richhayler]

This is literally the one feature that is missing that would stop me having to reach for the laptop every time I need to add a new field to a section. I’ve even resorted to wrestling with a Remote Desktop session from the iPad to do this fairly simple task.

[richhayler]

I’m bringing this up again as I believe there is a real need for this even at a basic functional level. As it stands some user interface manipulation tasks are just impossible to perform on mobile devices and iOS tablets. Can an interim, more tactical implementation be considered please in lieu of drag and drop. Maybe something like this for the field layout designer and reordering of matrix blocks to introduce buttons or text links (that maybe just appear on mobile) to allow a method to practically interact with the interface.

[carlcs]

@richhayler that’s a good suggestion, but I would guess it might be more work to implement than switching to a good drag and drop library.

[richhayler]

Reading through the feature details for iPadOS 13 it looks like touch events will more closely mimic the conventional mouse (full desktop web browsing experience), so it entirely possible that at least for iPadOS 13 the need to implement an alternative drag and drop interface may not be needed.

[nickholzthum]

After playing around with the beta of iPadOS 13, I can confirm that Craft CMS still doesn’t function properly. It looks like Craft developers need to add mouse pointer events in addition to mouse events in order for Craft CMS to function properly on the iPad. The implementation of pointer events should be fairly straight forward since it follows the same principles as mouse events, just abstracted for different interfaces. Here is a resource from Mozilla about pointer events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

[brandonkelly]

Not going to get to implementing mobile drag support for 3.5 as I’d hoped, but we will get to it for 3.6. In the meantime I did go ahead and add new “Move up” / “Move down” actions to Matrix block menus (#1035).

[richhayler]

I was really hoping for this one @brandonkelly for the 3.5 release. But thanks for the update and glad to hear you expect to accomodate it in the 3.5 timeline. The option to manipulate the order of matrix blocks in lieu of mobile drag and drop support is a welcome addition. Thank you.

[brandonkelly]

@richhayler Yeah I was hoping to get it in too. But it’s going to be a big enough change that I decided I’m not comfortable slipping it in this late in the RC phase.