Drag - Drop Reorder Your Repeating Group

[vega.andrew]

This is a quick guide on implementing drag and drop reordering of a repeating group:

1. Add the order field

2. Add / Install the Draggable Plugin

3. Add A Repeating Group

4. Inside of the Repeating Group, Add a Dropzone

5. Inside of the Dropzone, add a Droppable Group:

6. Set up a workflow as such:

7. Set up some data:

8. Set up conditionals formatting on the dropzone

9. Set up conditional formatting on the draggable group:

10. Test it out

11. Remove the ugly background colors and test:

[Bradluffy]

This is great. Thanks for sharing!!

[andrewgassen]

Love seeing this shared here! Great stuff.

[vega.andrew]

can anyone figure out how to make the repeating group refresh properly without the final two page refreshes? because that would really be killer

[fayewatson]

Hi Andrew thanks so much for making this guide! I’m trying to recreate what you did, and I can’t figure out what I’m missing at this step:

I see that I need to make the new value of the ‘Order’ field equal to ‘Current Workflow’s Contact’s Order’ but I can’t see ‘Current Workflow Contact’ as an option to select? Do you know what I’m missing here?

I copied what I did in the forum app here:

Bubble Editor - Forumapp3

[vega.andrew]

Does your drop zone have a types for content?

[vega.andrew]

Something is working now, and the refreshes are no longer needed.

[fayewatson]

Yes, I have that for the dropzone:

and this for the droppable group:

[vega.andrew]

Ok, how about this setting. I think that is what actually controls that.

[fayewatson]

Yes! That was it! Got it now. Thank you so so much!!

[chenhsinyu.tw]

Hi

It is “move back” option so that no Refresh is needed. You just encouraged more ppl to share here. Thanks so much for the tutorial.

[1danielbaker]

Anyone else getting this error?

[emmanuel]

This isn’t an error, this is the name of the workflow.

[jasonl527]

I’m trying to set the workflow so that when a group is dragged on it, it pushes the others down and keeps the rest above intact. I’m having trouble trying to figure how I would set that up in the workflow

I’ve devised a count system so that every new item gets added to the bottom, and can bring an item to swap places with other items, but not push the rest down. I’m trying to do some sort of declaration thing whereby all the cell’s with a cell index greater than the current cell, their order increases by 1 and any cell with a Food Group Name empty, is deleted.

How would I set this up and what are the flaws?

Bubble Editor - draggablepublic

@vega.andrew @fayewatson @chenhsinyu.tw

[Scott]

I suggest only updating the object being dropped to be the average value of the objects that are before and after it in the new sequence. This way, you only perform a single update.

[jasonl527]

@Scott I was thinking of doing that by making the order initially integers and then when I move them, I’ll change the dragged groups value to some decimal like 0.01, or even 0.001+ but realized that eventually it would add up to a full integer higher. Of course I doubt if my users would drag objects a thousand times but just wanted to cover this fringe case.

[Scott]

If you use the average, you won’t run into that issue.

[jasonl527]

@Scott Oh, finally got you. Average between the next one and the one I’m dropping it on. But how would I select the next one?

[Scott]

In each cell, use groups to retrieve the two position values and another to calculate the average.

[irlwynwood1]

hi all , i am trying to build a special droppable where we can drop from dropzone(1) to dropzone(2) , then move the object around while the data side shows a new object in user account, deduct the item placed from a total list of number we have, take the object droppable group and display the object in dropzone (2).
How to do that.
I am trying to basically use the top thread rule of moving object as well as adding the rule of making an object move from one dropzone to an other without being a repeating group.

Any idea>?