[J4.x] [UX] Subform row drag and drop is hard to use

[crystalenka]

This is a usability bug. Technically it's working as designed, but it could be easier and less frustrating.

Steps to reproduce the issue

These steps talk about custom fields, but it also applies to the core subform field.

1. Create 5 custom fields, set to subform only. (Alternatively: only two custom fields, and one of them is an editor field.)
2. Create a subform custom field and add all custom fields to the subform. Make sure repeatable is set to yes.
3. Navigate to an article where you can edit the subform custom field.
4. Add 2-3 rows.
5. Try to reorder the rows.

Expected result

You can clearly see where the row started and where you are putting it in the context of other rows.

Actual result

So. Much. Green. You cannot always clearly see where things are going or where you started, or drag it into positions that are not visible on the screen.

System information (as much as possible)

N/A, this has been an issue for a while.

Additional comments

A possible solution is collapsing rows into "ghost" representative rows while dragging so you can see more at once, and using a more minimal drop indicator instead of a full-height item.

This happens even when you don't have too many fields, especially if one of the fields is an editor field or an accessible media field, so it's not necessarily a matter of too many sub fields in a row.

[brianteeman]

I was thinking exactly this as I read the problem. Never seen it in the wild but it would solve the ux

A possible solution is collapsing rows into "ghost" representative rows while dragging so you can see more at once, and using a more minimal drop indicator instead of a full-height item.

[crystalenka]

I was thinking exactly this as I read the problem. Never seen it in the wild but it would solve the ux

A possible solution is collapsing rows into "ghost" representative rows while dragging so you can see more at once, and using a more minimal drop indicator instead of a full-height item.

There is something like it shown here:
https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d

I also think I have seen it in the wild but can't recall where.

[brianteeman]

ah - gmail

[brianteeman]

looks like its quite simple to do using the dragula library we have.

[crystalenka]

Yes, but subforms appear not to be using dragula from what I can tell. (I'm not sure why.)

[brianteeman]

🤦

[crystalenka]

@wilsonge @dgrammatiko do you all know why this is using it's own thing instead of dragula? It looks like it was like this in j3 but not sure when dragula was introduced.

Would there be any problems in refactoring this to use dragula?

[crystalenka]

Actually, after poking around Dragula I can see that it's not accessible and has no keyboard support. :( bevacqua/dragula#538

Every issue I open gets more complicated than I intend 🙈

[dgrammatiko]

@crystalenka check #19184 (comment) and maybe follow the whole conversation in that PR. The JS-group was aware of all the issues back in 2017 but I guess 2-3 people were not enough to do the mammoth task of dropping jQuery and making everything accessible. BTW Dracula seems to be abandoned (same goes for the shopify draggable)

[crystalenka]

@crystalenka check #19184 (comment) and maybe follow the whole conversation in that PR. The JS-group was aware of all the issues back in 2017 but I guess 2-3 people were not enough to do the mammoth task of dropping jQuery and making everything accessible. BTW Dracula seems to be abandoned (same goes for the shopify draggable)

I understand. Me opening issues to address things doesn't discount the hard work done before. Just trying to make it better. :)

This seems to be the most complete answer to accessible drag and drop, and it's based on dragula: https://github.com/schne324/dragon-drop

However both this and dragula seem like they are no longer maintained.

[crystalenka]

This is also an excellent resource and the up/down arrows available make it easier too for people with limited mobility in their hands: https://www.darins.page/articles/designing-a-reorderable-list-component

[brianteeman]

However both this and dragula seem like they are no longer maintained.

Not updated doesn't necessarily = not maintained

[dgrammatiko]

Not updated doesn't necessarily = not maintained

Brian, I know the difference and I'll say again that the project is not maintained. You can see the efforts to bring it back to life from Lea Verou: bevacqua/dragula#689 (comment) (btw I had a PR on her repo but effectively we end up forking it for our own use cases).

This seems to be the most complete answer to accessible drag and drop, and it's based on dragula

Yes, I maintain a private fork of that repo on top of the dragula...

[crystalenka]

Either way, the last link I sent has a nice example of reordered lists with the minimal drop indicators etc that I mentioned; the up and down arrows would help a lot also in mitigating this issue.

[dgrammatiko]

the up and down arrows would help a lot also in mitigating this issue.

Joomla had those a decade ago and people didn't really liked the UX... Also mentioned in the original PR of subforms (quoting Brian here): #19184 (comment)

[crystalenka]

Given that the use and implementation of subforms has evolved far from the original, I'm not sure it's fair to quote comments from 5 years ago. We've all learned quite a bit in that time, and the context of use is now different.

[dgrammatiko]

Fair enough, I don't have strong opinions about the up/down buttons in this context (I think for the list views would be counterintuitive but for subforms (edit view) might be ok)

About the issue here I have couple comments:

• The subforms don't have a title/description so it would be interesting to find a way to collapse the inputs in such a way that a user would not loose track of the selected (dragging) element. Making the shadow (the dragged element) a generic placeholder might be counter intuitive (especially for existing users).
• The current implementation should be accessible at least that was our perception at the time when @Fedik did the PR
• There are known security vulnerabilities (yes I know people are more attracted to the UI/UX than any underlying, harder to tackle issues), just saying it's not only the look and feel

[bembelimen]

Just from a usage approach, I had to implement up/down arrows (which were then used most of the time) especially for large forms (when scrolling is needed) and for mobile usage.

[brianteeman]

@wojtekxtx once again you post nonsensical text that is absolutely nothing to do with the issue here

[brianteeman]

You talk about fields and filetypes.

[Quy]

Related #37974

[brianteeman]

@Quy how is that related. Its a completely different issue

[brianteeman]

A possible solution is collapsing rows into "ghost" representative rows while dragging so you can see more at once, and using a more minimal drop indicator instead of a full-height item.

That would be ideal but when using native draggable the "ghost" is actually an image representation of the item being dragged. Other than the background nothing else appears to be "stylable".

Everything is controlled by the browser. At 300px it changes behaviour - see https://codepen.io/thetallweeks/pen/WNYeod

[brianteeman]

(ps: What am I missing in that all my fields are displayed horizontally when yours are vertically)

[crystalenka]

(ps: What am I missing in that all my fields are displayed horizontally when yours are vertically)

It switches layouts when you have 5 or more fields in a subform.

That would be ideal but when using native draggable the "ghost" is actually an image representation of the item being dragged. Other than the background nothing else appears to be "stylable".

That is a true bummer. I'm sure there's a solution though... hm.

Everything is controlled by the browser. At 300px it changes behaviour - see https://codepen.io/thetallweeks/pen/WNYeod

It varies by browser too—in Safari, the behavior is exactly the same on both elements.

[brianteeman]

That is a true bummer. I'm sure there's a solution though... hm.

the only thing I found was this old post from an old old friend https://www.kryogenix.org/code/browser/custom-drag-image.html

[crystalenka]

Actually, what he says about dragstart and dragend events is helpful (the third example). Because we don't necessarily need our dragging element nor our "this is where it started" indicator to be tall; both could be collapsed to more easily see what the context is

[micker]

as i understand
if we have many field in subform we have a problem
we can use table display => not reponsive and display is exploed on right. Bad solution
maybe we can use 'span' option deuce height of subform zone, but doesn't works...
yes maybe just reduce height of zone on dragstart event like @crystalenka ?

[AndySDH]

Adding a +1 to this one. Dragging Subforms really took a step back in usability in J4 compared to J3 :(

[Fedik]

Please test #42334

[AndySDH]

Please test #42334

This approach is a bit reductive and I don't feel like it fully addresses the issue. Dragging and dropping is still very bad, and I don't think adding an up and down arrow is enough to call the problem solved...

[Fedik]

Dragging and dropping is still very bad

Dragging a large piece of Content is not very practical.
Realistically I do not think it can be fixed in another way, without over-complication.

But if people do not agree, we can reopen this issue.