Vue.Draggable is one of many excellent tools for sorting a list of items. However, after struggling to find a pluggable solution which also provides an adequate solution for grouping items, I devised my own solution which should work just as well for most sorting plugins.

Problem

Already using Vue.Draggable to sort a list of items, I was presented with a new requirement to group those items.

I found the Vue.Draggable demo nesting solution too difficult to operate as a user; it isn't clear to me what actions cause items to group or ungroup.

Solution

This was definitely a forehead slap moment for me, realizing I could make things appear to group with CSS instead trying to do anything fancy like nested Vue.Draggable instances.

I add "spacer" items between every item not in a group, and omit them between grouped items.

This is a static example to demonstrate how items may appear to be grouped.

Rules

1. Sort and group your data list, then build a view list by flattening your data list and placing an empty index between each group and ungrouped item.
2. Do not give your spaces drag handlers.
3. Put a space in the first and last position, so items can be dragged to the extremes without grouping.

Here's a Code Pen demonstrating the solution using Vue.Draggable starring the cast of Firefly.

This is an accessibility and usability nightmare

I don't find this much easier to use than the Vue.Draggable nested solution, so I absolutely would not want to inflict this interface on anyone without both fine motor color and a high quality device interface.

My final solution involved having a distinct "grouping" mode, involving checking items to be grouped, then clicking a "Create Group" button. It isn't clever, but it is functional and accessible by using common established form inputs.

Even dragging and dropping to sort may be convenient for some and still difficult for others, and you should include buttons to fall back on. At least "Move Up" and "Move Down", and also "Move to Top" and "Move to Bottom" for longer lists.

Thanks for reading, sorry it didn't have a very happy ending, but hopefully your itch to group with Vue.Draggable - or whatever else is itchy - was scratched.