UI on Drag Drop Repeating Group

[ladd0393]

Does anyone have a good example or method of a good UI when using the Draggable Elements plugin to reorder a repeating group? My workflows and logic all work without issue. My goal was to push the other items in a list down as the draggable element passed over them, so it would look like the element was inserted into that spot in the list. I’ve tried this a few different ways:

1. When this DropArea is dragged over, min height = 100px
2. When this DropArea is dragged over, bottom padding = 100px
3. Added an invisible shape with 100px, When this DropArea is dragged over, this element is visible.

However, all three methods produce this same result. The extended DropArea only remains visible for part of the time as the group is being dragged, so it results in a bad experience. I’m open to solutions for this or other design options as well.

Editor
https://bubble.io/page?type=page&name=drag-drop&id=my-forum-examples&tab=tabs-1

Demo
https://bubble.io/page?type=page&name=drag-drop&id=my-forum-examples&tab=tabs-1

[ladd0393]

I tried another approach this morning where a line (technically, a bottom border) shows where the list item will be inserted. I have a conditional When this DropArea is dragged over, bottom border = 4px. However, sometimes after the group is dropped, this border still remains visible. Is this a bug, or is there a way to reset the conditional since the DropArea is no longer being dragged over? See below:

Open to a fix for this or my original approach to push list items as its being dragged. Does anyone have a good working example of reordering a repeating group using the Draggable plugin?

(Note: I’ve looked at the reorder RG plugins but I need more control over the ability to index list items than these plugins afford me)