0

I have a paginated list where the user drags and drops items to change the order. This list is paginated, so when the length of the list is longer than the page there is no clear way to move items outside of the current page. Is there a design pattern I could use?

The application is an Angular app with a UI very similar to this. The lists have a considerable number of items so due to performance issues we are adding pagination to it, which is causing a lot of UI problems.

Improve this question
4
  • Could you please elaborate more on what type of application it will be? Does it really need drag and drop re-ordering feature on 2nd page onwards?
    – Ades
    Commented Mar 31, 2021 at 15:23
  • @Ades Added some extra information to the question.
    – Miki
    Commented Mar 31, 2021 at 15:31
  • Ok, it's clearer now. Another question: where those draggable list items are created? Are they created within the app or they are pre-created and users can only drag them? Because one way would be to allow users to categorise the items at the time of creation.
    – Ades
    Commented Mar 31, 2021 at 16:10
  • @Ades There is a button "Add item" next to the list - currently we add the item last, and take the user to the last page.
    – Miki
    Commented Mar 31, 2021 at 17:17

2 Answers 2

Reset to default
2

What about this:

When you start dragging a row an additional option appear which can be also a table row but with different style. For example with dashed border. This row will have the copy - "Move to another page". When you drop the row there you see immediately a small modal with all the page numbers as small cards and you should be able to click on which page to move the row. So it will be - drag -> drop -> click and that is it.

Improve this answer
1

Firstly, if there are a lot of pages then drag & drop is not the best experience as it would be hard to move items between pages.

I assume that each list item has a drag handle. If the order number is visible in the list it might be a good idea to let a user manually type in the order number.

Improve this answer
1
  • The app has evolved from a list with all elements + dnd to a paginated list, so removing dnd seems like a step back from the users' perspective. Current solution is a three step process where users can multi-select rows, then "move records to page", then move to that page and rearrange rows within the page manually. Not optimal in my opinion. Wondering if there is a better way.
    – Miki
    Commented Apr 15, 2022 at 15:29

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.