Collapse all sets automatically when dragging

[stuartcusackie]

It's quite tricky to drag and order large field sets into in a replicator / grid field. Worse so in a grid because you cannot collapse sets.

I had the same problem on a custom app I built using Vue draggable / sortable. One solution is to automatically collapse all sets on dragstart, and then automatically re-expand them on dragend. It makes for a much nicer dragging experience.

Thanks.

[andjsch]

I wanted to open up an issue for the same thing a few days ago!

I would have a different approach for it though. Instead of collapsing, why not display an up and down arrow instead to move sets within replicators, blueprints and so on?

[stuartcusackie]

Arrows are okay but they don't help much when you have 20 items in a grid.

Here's a rough GIF of what I mean (ignore the hierarchy / nesting):

[andjsch]

Looks good. If it works that well as in your GIF, then I'd be more than happy. Hearing that all the time from customers and seeing myself struggle sometimes if big sets are to be dragged around.

[robdekort]

Agreed. Would be great if you could collapse grid stacked sets and maybe even have auto collapsing like you suggest. Either this one or #140 can probably be closed.

[robdekort]

Now we have Statamic V4 I figured the replicator takes a lot less space with all the + buttons being hidden now. So I converted my stacked grid to a replicator with one set. It's A LOT easier to use now. You can even disable sets and use the duplicate option this way. It's best of both worlds. The only difference from a stacked grid vs the v4 replicator is that you can't change the add label. It's the just the + button now. Which in my case is fine, because with the replicator in accordion mode you can see the field label most of the times so you know what you're adding. Thought: the stacked grid might might be redundant.