Make drag & drop mobile friendly [#1635416]

One of the often used interactive functions in Drupal is drag and drop, and with us potentially putting panels in core it will be even more used. However its far from usable on mobile, there are several patterns we can use - but in general the biggest problem is how we handle scrolling.

1) moving by selecting and then tapping where it needs to be dropped
2) selecting with one finger, then scrolling with another
3) selecting with one finger, then it autoscrolls when you reach the end of the screen

My preference goes to the third option, because it allows you to use only one hand and the only magic involved is the autoscrolling. This is a pattern that you can find in many of the prominent platforms, most prominently android and iOS - where you can do this to reorder music in your playlist.

Comments

Comment #1

nod_

French

Lille

CreditAttribution: nod_ commented 14 June 2012 at 17:47

Issue tags:

+JavaScript, +mobile

Comment #2

LewisNyman

he/him

CreditAttribution: LewisNyman commented 17 June 2012 at 09:49

Nice to see this have it's own issue.

Another consideration to take in mind is how that selection is made. In the prototype I implemented a very simple drag and drop; drill down to content and hit the toolbar button that looks like a list. Because my touch event chops were still pretty raw then the 'dragging' event begins instantly as you touch it, this disables the ability to tap on any other element within the draggable item. Lesson learnt.

As far as my preference goes, I think we should implement both 2 and 3. Three is a good recreation of the best possible solution with a mouse and will be what new touch users would expect. Two is the best possible implementation on any interface because the speed of the scrolling is decidded by the user, not by the system.

Comment #3

Bojhan CreditAttribution: Bojhan commented 17 June 2012 at 10:10

@Lewis Makes sense, so lets do 2 and 3.

Comment #4

nod_

French

Lille

CreditAttribution: nod_ commented 17 June 2012 at 13:32

Any idea about how to make 2) work before I dig in? Is it only native or can be shimed in JS? Also, phones with no touch screen, is the current tabledrag for keyboard works on that?

I'll look that stuff up, but is someone has an idea already that could help.