3

I'm trying to implement a drag-and-drop functionality to reorder items. The items are of varying size (height), and in some extreme cases taller than the screen.

The simple method shown below wouldn't work as we wouldn't be able to see the other items if the item being dragged is large.

enter image description here

A possible solution is to have a drag button near the top of each item, and when the user holds down on the button to start dragging, the item compresses into a single-line item. But I'd rather not have a drag button and let the user start the dragging by holding down anywhere on the item.

  • 5
    Selecting anywhere on an item may still work if you collapse the selected item down to one line, so long as you make the focus of the collapse (and from where you start dragging) where they clicked/touched (so it collapses around their current focal point). You would probably also want to collapse the other (potentially large elements). – TripeHound May 21 '18 at 10:53
  • @TripeHound This sounds like the beginnings of an answer that might be worth an upvote.. – maxathousand Jun 20 '18 at 6:14
2

as we wouldn't be able to see the other items

This wouldn't be a good UX.

Give your users the big picture view. Use symbolic representation of the items: item titles, item pictures.

  • 1
    Sorry, would you mind elaborating on your answer? As it stands, it’s a bit brief and it isn’t clear what you’re recommending. – maxathousand Jun 20 '18 at 6:13
1

The idea to collapse the dragged item and represent it somehow in a small form while dragging is good. However what about the other large items, possibly adjacent to the dragged item?

A different approach is to offer explicit "reorder" functionality, then collapse all items to their small unified form, before allowing to drag.

Going with your idea -- since the items can be taller than the screen, I assume the list can scroll? You need to provide a way to pass the larger thems (or to reach a target below the fold). Implementing it well is not simple.

  • You must scroll the list when dragging and the cursor is close to the edges. The speed of scrolling should be varied according to the distance from the edge (closer = higher).
  • You need to have a precise animation to collapse items, move them, move other items when collapsing or dragging and allowing a target space, etc. It all should feel natural.
  • Lastly, you need to ask if your users will assume they can drag items in such a list (may not be a standard/familiar function). A way to increase affordance is to have drag grip icon on each item -- similar to the button you mentioned I think, but maybe more elegant.
  • I like this answer better. Even if we press to drag and collapse the item being moved, the issue of having large items in the list is still an issue since the user would have a hard time locating themselves (think about large rows in an excel file). Clicking a "reorder" button allows the system to introduce a significantly different looking state (all rows collapsed) without startling the user. – Nicolas Hung Nov 5 '18 at 22:31
1

It would be best to include drag handles to indicate that an item can be dragged, unless the UI is familiar to your user and they all know to expect to be able to move an item around. Exception is if the item has any other click interaction possible on it, Then Drag handle becomes really useful to have (Think play music, spotify playlist etc)

As for reducing the size of the object on drag, that sounds like an idea that would work, Below is an example of this implemented in Google Drive.

Could you provide a little bit more context to the problem you are trying to solve? There are all sorts of accessibility issues that Drag & Drop introduces and the problem and the type of users would determine the solution you should use.

Drag & Drop resize

0

When the current item is too tall, maybe allowing the users to see a portion of "other content" will help them to understand that there is some space where they can drag&drop the current item.

Also, perhaps, allowing the screen to auto-scroll when the users are dragging the item nearby the screen edges will be a good interaction?

Have a look at the mobile view of todoist or similar list-heavy apps, maybe they have sorted this issue in a smart way that may inspire you or put you in the right direction :)

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.