I'm currently designing a mobile website. My intention was to use interaction patterns like drag'n'drop for some interactive features.

E.g. I want to ask users to sort 5 items by personal relevance - the items are arranged from left to right. There will be more elements than that on the page and it will be scrollable.

I did like the idea in the first place but now I'm pretty convinced it won't work as it would cause issues with scrolling and @#* up the experience.

Now my question was if if there's some technical way to make it work - e.g. limit drag'n'drop to a region. OR should I avoid interactions like drag'n'drop and reduce it to tap, scroll and swipe.

  • Regardless of whether or not you should proceed with this functionality you'll still need an alternative for people who are accessing it on a non-touch device (such as those with a joystick control, rollerball etc - blackberry devices, PSP etc).
    – JonW
    Nov 4, 2013 at 10:04
  • Are you dealing with multiple devices/resolutions? Nov 4, 2013 at 13:07
  • yes, bendataclear. as it's a website it should work for all devices and viewports Nov 4, 2013 at 13:13

2 Answers 2


I would use a 'hotspot' on the items to be sorted, so that the user can both scroll the page and sort the items.

If the user initiates a swipe from the hotspot then they drag'n'drop the item and the page does not scroll (unless they need to drag beyond the edge of the screen). If the user initiates a swipe from elsewhere then the page will scroll and the items do not move.

I have a phone application which does exactly this (for a vertical list) and it works great.

simple list with sorting hotspot

  • 1
    Can you explain how this hotspot works in this context? It's not clear how this negates the scrolling of the screen or how the user uses it.
    – JonW
    Nov 4, 2013 at 15:49
  • 1
    Hopefully that explains a little better?
    – Fractional
    Nov 4, 2013 at 15:54

Yes, if we don't plan the organisation of content properly, it will be a bad experience for the user to have this sortable (drag n drop) thing within a scrollable content. Again, on the positive note this drag and drop is one of the recognisable feature on Mobile for users, where they see and use this feature in few apps which they will be using in daily life (EG: Notes app in iPhone)

This drag & drop option will work better if the page is of fixed height. May be re-looking in to the page content organisation, so that the page stays in a fixed height and user can use this sortable (drag n drop) option with out effecting the whole experience.

If there is no chance to re-organise the content as said here in (Option:1), you can still list these 5 items within the lengthy scrollable page, and can give a button "Sort my items" near to those items. By clicking on the button, we can show this sortable (drag n drop) option in a overlay, which should be specific to sort these items.

As these items are being shown in overlay, user can easily sort these items without interacting the lengthy scrollable page (which is in background) as it will be locked.

This option may not be user friendly as it requires more number of clicks and more of error prone. This is the worst case option, i'm just trying to throw an idea.
If Option1 & Option2 doesn't work, we can still show these 5 items within the lengthy scrollable page, and can give a button "Sort items" near to those items. Once they clicked on the button, we can then show the (counter/drop down) with the numbers 1-5 for each item. So, users can select a unique number from each 5 drop downs and then click on the button to sort them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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