Moving fields in Form Builder

[dth1692]

The arrows work, so this is more of a comment. It seems like an "insert" feature would work here for more substantial form edits. When I first looked at it, I also thought a drag and drop method would work, but I'm not sure if that would be a necessary change.

[jimsafley]

This is a work in progress in the drag-and-drop-form-builder branch. It uses SortableJS to enable drag-and-drop on the fieldsets. It seems to work except for a visual oddity that's very similar to the one described in this issue - except, for us, it captures pixels below it (Chrome 84.0). We need to sort this out (heh) before we merge and close this issue.

[jimsafley]

Hopefully fixed in 0b568abee630ce190d0d9bcd7c78c417777cb41b

@mebrett @dth1692 I've merged this with master. Please take a look at the drag-and-drop behavior and report whether it works. Thanks!

[dth1692]

@jimsafley I can't get it to work on Edge or Chrome. There is no visible difference- should there be an icon showing where to click?

[jimsafley]

It looks like the changes haven't been pulled in yet. @mebrett will do it once she is able.

[mebrett]

Just pulled master for datascribetest site.

[dth1692]

After playing with it, I can't find any functional issues yet.
Visually I have two thoughts- the field box and a ghost version of the box move around together but not in line so it always has a visually confusing doubled look and constant movement as you drag the field. Second is how easy I found it to lose the original position (or this is a statement on my attention span). Since I tried this on Religious Ecologies where there are over 30 fields, having an original position would have been helpful.

My thought is to leave a ghost version in its original position until dropped and drag the solid field around.

[lmullen]

From meeting: @dth1692 and others will look at sortable js documentation, and @jimsafley will look into some configuration options.

[jimsafley]

SortableJS does not have an option to keep initial position of an item while dragging. There is an open feature request, so there is demand. @kimisgold That issue may have some ideas about how to go about it, if that's the way we should go.

Otherwise, I added an slight animation when sorting fields that should make placement more obvious. @dth1692 Check it out. Perhaps it's just enough.

[dth1692]

@jimsafley the slight difference is noticeably better. When/if SortableJS makes it possible to not have the field and ghost field move together, I think we would want to change it but the improvement works

[dth1692]

Maybe I spoke too soon- when I add a new field, it automatically starts at the bottom. Moving the field from the bottom has a strange effect on the form where if I drag the field up and haven't dropped it, I still hold the ghost field while the field itself returns to the bottom and shoots back up to where it should be, Its a fast and confusing blip of movement.

[jimsafley]

I see what you're describing. As you say, the odd animation only happens when dragging the last field in the list. It's baffling. @kimisgold Could this have anything to do with 05416d08fe6170b9e608d4e0a91ce9a6603b7b20?

[kimisgold]

It shouldn't. The only thing that commit does is define the handle target. I tested undoing those changes, and the odd drop to last is still happening.

[kimisgold]

I tested the following browsers and saw consistent behavior across them.

• Edge (Win10)
• Chrome (Win10 and MacOS)
• Firefox (Win10 and MacOS)
• Safari (MacOS)

I was able to reproduce active item jumping to bottom of list during drag, and I was not able to reproduce overlarge ghost on drag.

[jimsafley]

I've observed two visual oddities in Ubuntu:

• When dragging the last field, the ghost and other fields shuffle erratically (Chrome 85.0.4183.121, Firefox 80.0.1)
• When dragging any collapsed field, the ghost includes a bottom section (Chrome 85.0.4183.121)

[jimsafley]

@mebrett On the master branch I've committed a fix to the erratic shuffling we see when reordering the last field in the form builder. Would you mind pulling the change and testing it on as many browsers as you can?

[mebrett]

Just pulled the update for datascribetest. I'll take a look, and anyone else who wants to can also try it out.

[jmotis]

I'm getting some odd highlighting on the fields now after I move a field in Safari - it doesn't replicate in Firefox, where things look good, so this is probably a Safari-specific thing

[mebrett]

I'm not seeing the weird jumping. I did notice that, in Chrome, if I try to move something to the bottom, I have to go slowly - just dragging it quickly toward the bottom of the page only moves it down one.

[jimsafley]

I'm getting some odd highlighting on the fields now after I move a field in Safari

I suspect the highlighted area is the same that would've been highlighted if you did a normal click-and-drag with your cursor. Perhaps Safari doesn't distinguish between Sortable's drag-and-drop and a normal cursor click-and-drag. There's probably nothing I can do to avoid this. Is it an acceptable peculiarity or should I revert the fix?

if I try to move something to the bottom, I have to go slowly - just dragging it quickly toward the bottom of the page only moves it down one.

I saw this before my most recent change, so I think it's normal behavior of the sorting library.

[jmotis]

You're right, it's the same as the normal click-and-drag highlighting. Can we file an issue to ping the Sortable folks about it and see if they'll fix it in a future update? For now, I'd say it's an acceptable peculiarity (though we should document it) since it's weird but has the silver lining of temporarily recording/showing you how you just rearranged the fields (start point, end point).

[jimsafley]

Added an issue. Closing this issue.