In my app users can add items to lists and reorder the index of the listitems by whichever criteria they like. The users of this app are not tech savvy, and I would like to avoid any technical input to achieve this.

example of list element

Now, on desktop reordering of the items is not such an issue. However, I can't decide on a 'best' way to do this on mobile web. The main issue being that the lists could potentially be larger than the screen itself, so when applying drag and drop, how will a user scroll and move an item?

My initial idea is to make a mode switch. See second picture below. When the user presses move item all other items make space for the first item to be dragged down (or up) (see third picture).

move item mode moving one item

My question is: How would I ensure a user is able to drag and drop items, but is still able to scroll the list on mobile web?

Or if you think this is the wrong approach: Do you know a better approach to let users reorder lists on mobile web?


For non-tech savvy users, it's hard to use gestures to drag items. Random click on the item itself – and user gets to the item's content. Gestures are non-visible, too.

Here is a good point to use modes. Just let a user enters into the safe Change order mode and use buttons for re-ordering. This:

  • makes it obvious of how to move an item up/down, or make it first/last
  • eliminates all the possible troubles with scroll, as the target item is always in view

For tech savvy users you can leave drag option. On finishing the task, a user exits the mode. Please, see the image:

enter image description here

  • Hey Alexey, thanks for your answer! I have a few concerns with this. 1. don't you think having 5 interactable objects in this mode is a bit overwhelming? 2. You mention the item is always in view so scrolling is no issue, should the item stay centered then? 3. Do you reckon that in your suggested solution it would be possible to change between moving items? For example: I'm moving item 2 in the list and then I want to move item 5. In this solution now, I'd have to exit the mode, go back into the mode with a new item.
    – JonSpr
    Oct 30 '19 at 9:35
  • @JonSpr please note, this is just a concept. You can have Move-to-top and Move-to-bottom as an additional actions (More actions), or remove these at all – consider your users' tasks. I'm not for centering an item, the more strong UI feedback is moving it accordingly, except very top and very bottom positions, showing there is at least one item on the top/bottom. Not centering is also good when you change an item to move. Again, this is just a concept, which should be fine-tuned ;) Oct 30 '19 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.