Drag - Drop Reorder Your Repeating Group

Good question - will need @bubble’s input on it to know for sure.

I built an RG with a drag and drop reorder function that seemed to be working perfectly until I started testing it with real data. My data is greater than the screen height. I am using Full Lists on a Nested RG with two levels. When I try to drag outside of the data currently viewable on the screen, nothing happens.

Data Example:

  1. Outer RG Index 1
    A. Inner RG Index 1
    B. Inner RG Index 2
    C. Inner RG Index 3
  2. Outer RG Index 3
    A. Inner RG Index1
    etc., etc.

And so just for clarification what I’m trying to do is reorder the Inner RGs that are within the same Oute RGs, but when any single Inner RG is greater than my screen height, it drag up and down to reveal the other cells.

This is very cool (and useful) indeed!! :slight_smile:

I updated the size of the Dropzone and the Draggable group to be just a bit bigger than a ‘drag’ icon and moved it all the way to the right so you just grab that, vs having the whole cell as the group. Works well too :slight_smile:

This is our most recent status :slightly_smiling_face:

com-video-to-gif

4 Likes

Hi John9, Did this work such that different users could have different orderings for the same set of contacts? Would love to see your mock up but the link is pointing to a template

Yup, just recreated this again in the forum app since I deleted the one linked above: Forum_app | Bubble Editor

I created a Data Type called Contacts with relevant fields. If you “Run as” the top two Users in the app you’ll see how each one has different ordered lists in the repeating group.

After you go through the steps from the first post above the next step is to add a new field to the Contact Data Type called User, type User, then make sure the workflow when new users are created looks like this:

The last step is to set up the Privacy on the Contact Data Type:

One thing that may be missing your use case is that you may want the users to all be pulling from the same single contact list in your database. This is strictly a way for unique, newly created data points to be sorted per user. I’m sure there’s a way to set up sorting per user with a single list of data but I haven’t thought through it.

Thank you john9!

Yet Another Drag Drop Example. Keeping it simple

3 Likes

It looks really good.
Do you have example page?

Can anyone get an input field to work on Mobile when using Drag/Drop groups? These inputs are completely disabled on mobile. However, dragging and dropping works fine.

(I have input fields inside the drag/drop group)

1 Like

hi, can you please share a tutorial on that?
I would like to reproduce such a behaviour! great!

Hi mate, good stuff! How I could reproduce that? Is there a tutorial?

Hi, I’m uploading the workflow today.

Hi, here’s a simplified version. The workflows are basically the same.

2 Likes

Hi, This is exactly what I am looking for! Will check out the tutorial!! Thank you!

That’s a great version. It doesn’t work when you try to reorder within the same board. Any ideas how to fix that ?

Thanks for the information. There were two small bugs, should work now. The sorting from bottom to top works correctly. The other way around you would have to add some additions.

Thanks from everyone sharing. Spent two days staring at this annoying problem.

Here is version of drag and drop that I felt good about:

  1. Allows you to insert item of the list anyway and reorder the adjacents respectively
  2. Reordering Up and Down
  3. Limited the workflow to only change affected items instead of re-numbering all tasks’s list order
  4. All list-order will correspond to cell index nicely, no weird numbers

Some initial sketches:


29 Likes

Good work, simple effective

Hi @soh.ju.hu

This seems to be the simplest solution possible, thank you. :slight_smile:

Remove empty space in the RG with full list, genius :slight_smile: