0

What will be best design practice for having items thumbnail with option as drag gable, sort able with paging records(considering more than 1000+ records)?

Below is just my current implementation.

Now I want each box to drag and sort order.

I was thinking about JQuery Sortable with grid type drag and sort.

But is there any better way to get all these with best user experience?

enter image description here

  • 1
    If draggable and with paging, the UX is going to be very awkward, as you'll really only be able to drag within a page. Dragging to next/previous page will be hard to implement, unless you have "hover areas" on left and right to get it to page up/down. Maybe scrolling canvas is better than paged, cf. dragging files within Windows Explorer, etc? – Steve Jones Sep 20 '17 at 7:43
  • 1
    What is the domain, and what tasks are the user trying to do? Is this primarily viewing? why are they dragging? Why is pagination needed? – Mike M Sep 20 '17 at 8:35
  • @MikeM It's backend system, where admin will be set items display order. Pagination is not primary goal. Without pagination what can be best UX ? – yogen darji Sep 20 '17 at 8:43
2

Try allowing multiselection, drag and drop plus a contextual menu for repositioning 1 or more items.

Allow Shift + select for multiple items (or single click for one item). Then, the Right click or Contextual menu can serve up bulk actions (if multiple are selected). They can still reposition selected items by traditional drag and drop, in addition to an explicit popup menu.

NOTE: 'Move' may not be the right term for your app, since they're not changing the location, but repositioning; perhaps you can test with users to see what best conveys the concept.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Google drive allows similar actions: here's a pic of their grid view, with multiselect:

enter image description here

This model allows:

  • 1 click for single selection
  • Shift click for multiple
  • Contextual actions for the selected items

As for pagination, I don't see what the advantage is in your application. Is it simply an implementation detail, because returning large amounts of results is an expensive API call?

If so, maybe have a 'Load more' button.

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.