The best way to select multiple rows in a table and be able to reorder the selected rows



  • I am designing a dashboard where the user can select rows in a table and reorder/resequence the selected rows before clicking on the print button, What could be the best possible solution?



  • Edit: I'm redoing the answer after @Johnny_UX pointed out that the question mentioned multi-selection, which I didn't notice; my bad.

    1 - Not absolutely necessary, but it might help to clearly separate your rows:

    enter image description here

    2 - Use a drag indicator on hover + the hover hand cursor and row highlight to indicate the interaction

    enter image description here

    3 - Indicate selection during drag with a selection highlight and a closed hand cursor. You can leave behind a "ghost" of the rows and point to the destination, or use some cool animation to move the rows to the position they will be when the user releases the cursor.

    enter image description here

    For multi-selection, use the hover effect on all the selected rows and link them visually:

    enter image description here

    Show them together while dragging

    enter image description here

    enter image description here



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2