Forum Documentation Showcase Pricing Learn more

Drag - Drop Reorder Your Repeating Group


#1

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

  1. Add the order field

  1. Add / Install the Draggable Plugin

  1. Add A Repeating Group

  1. Inside of the Repeating Group, Add a Dropzone

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

  1. Set up a workflow as such:

  1. Set up some data:

  1. Set up conditionals formatting on the dropzone

  1. Set up conditional formatting on the draggable group:

  1. Test it out

  2. Remove the ugly background colors and test:


Need help creating a Kanban board in my app
Changing the Order of Images in a List Using Dropzones?
How to use Drag/Drop groups to reorder a Repeating Group
In a repeating group, is it possible to allow dragging a row to change its order?
Kanban style dash?
Seeking the Holy Grail of Drag and Drop
[Proudly built on Bubble] Spend less time in unproductive meetings
Puzzle of the Day! (to be solved)
Dynamically assign Order value?
#2

This is great. Thanks for sharing!!


How to move drag/drop groups from a repeating group to a drop zone to be displayed
#3

Love seeing this shared here! Great stuff.


#4

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


#5

Hi Andrew :slight_smile: 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:


[SOLVED] How to remove/add a droppable element from/to a Dropzone in a repeating group?
#6

Does your drop zone have a types for content?


#7

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


#8

Yes, I have that for the dropzone:

and this for the droppable group:


Drag and drop — order issue
#9

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


#10

Yes! That was it! Got it now. :smiley: Thank you so so much!! :+1:


#11

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.


#12

Anyone else getting this error?


#13

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


#14

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?

@vega.andrew @fayewatson @chenhsinyu.tw


#15

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.


Drag-and-drop ordering perfection
#16

@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.


#17

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


#18

@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?


#19

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


Seeking the Holy Grail of Drag and Drop
#20

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>?