Drag and drop reordering with large items

Question

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.

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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 :)