Drag - Drop Reorder Your Repeating Group

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

@emanuele.galvagni any ideas?

Hi @fayewatson

Hi @fayewatson. Did you get this to work? Iā€™m having the same problem that Iā€™m seeing in the example you posted. I can get the draggable groups to drag, but not reorder.

Thanks in advance!

Hey @scottb50 :slight_smile: It looks like the workflows for my page got deleted unfortunately! I would add them again but the forumapp3 editor is freezing for me. If you have a link to a public test app with your setup, I can definitely take a look!

Hi @fayewatson! This should show it.

Thanks for your help. You can, of course have this code to replace what was deleted on you end. :slight_smile:

No problem at all! :slight_smile: I think the app may currently be set to private?

It was. Is no longer!

A million thanks!

1 Like

My pleasure! :slight_smile: This is where I got tripped up too - on the third step of the workflow, the action was modifying ā€œCurrent cellā€™s blockā€:

And I just changed that to ā€œCurrent Workflow Blockā€:

That should do it! :slight_smile:

*Update: I forgot to mention that All Blocks should have a different value for their Order field in order for the drap and drop workflow to correctly switch the Blocks in the repeating group. If each Block has the same value for their Order field, you can manually number these for each Block in the App Data tab. Back in the editor, make sure each Blockā€™s Order field is 1 higher than the last Block that was created. The expression would be: DoASearchforBlocks:count+1.

Workflow Itemā€¦Thatā€™s very cool. Does this action change a database table? It seems as though it would save a lot of display data actions. Have you used it for anything else?

@fayewatson, youā€™re amazing. Thank you so much!.

1 Like

My pleasure @scottb50! :blush: Yes, the Current Workflow item option is very cool! I honestly am not sure of all of the possibilities of using Current Workflow item, but this was an extremely awesome example by @Scott here using custom events and Current Workflow item to create spreadsheet functionality:

Yes, in the drag and drop example, there are two Block Things being modified. In summary, if a Draggable Group is Dropped onto a DropArea, each of those Blocks ā€˜swapā€™ Order fields. So if Group 1 is dropped into Group 4, then Group 4 becomes 1 and vice versa.

This is slightly different from Drag/Drop similar to Trello, where dragging and dropping will re-order the list. I havenā€™t created that in Bubble before, but @levon has a template with that type of re-ordering functionality, incase youā€™re interested!

@Scott,

Iā€™ve scoured the forum, manual and reference trying to understand the statement:

What does this look like in the ā€œhas a group dropped on itā€ workflow?

In the workflow, I obviously have access to the current cellā€™s index. The next one Iā€™ll want to use is simply current cellā€™s index + 1. I can get the position value from the current cell. What I donā€™t see is how to get the position value from the next cellā€™s thing so I can calculate the average.

Thanks.

@Scott,
I keep coming back to the need for drag-drop list ordering, but I havenā€™t figured it out.
I didnā€™t understand your statement, "In each cell, use groups to retrieve the two position values and another to calculate the average.
I simply donā€™t understand how to address a particular cell in the RG other than the current cell. How do you use groups to get at values of a cell other than the one currently object of the workflow?
Assuming I figure this out, what trick(s) must I be aware of if the drop location (or the dragged cellā€™s original location) is the first or last in the RG?

@fayewatson,

Iā€™ve been fumbling around trying to figure out how to do the reordering of cells using drag-drop. I got the cell swapping to work but thatā€™s not a complete solution when there is a lot of selective sequencing to be done. It seems like it shouldnā€™t be too hard, but despite the reading Iā€™ve done, I donā€™t see how to address cells other than the one being dragged and the target drop-zone cell. What I believe I need is the cell before or after the drop-zone cell in order to adjust position values to ensure things remain in the desired order.

$277 is a lot of money to drop for the answer to this problem, so the task board template isnā€™t a reasonable option for me.

Have you figured out how to do this? Would you be willing to share the technique or point me to the answer her in the forum?

Thanks,
Laurence

Hey @laurence :slight_smile: Iā€™ve had trouble with this before too, especially making sure Tasks stay in the correct positions as you mentioned. To be honest, Iā€™m really not sure if this is the most efficient way to set this up, but happy to share this incase itā€™s helpful! Here is an example:

Preview:

Editor:

In this example, I first created four Tasks and set a number for their Order field (this will change the more they are dragged/dropped):

On the page, the repeating group sorts the Tasks by the Order field from least to greatest:

Within each repeating group cell, there is a Droparea (which turns blue when it is dragged over) and a Droppable Group containing the Name of the Task and its Order field value (just to get an idea of how these change). When a Droppable Group is Dragged/Dropped the actions are:

Action 1: Make Changes to a Task (The Task which was just droppedā€™s Order is being changed to the Order of the Task it was just dropped on):

Action 2: Make Changes to a List of Tasks (this is adjusting the Tasks below the Task which was just dropped). Here all of the below Tasksā€™ Order fields have 1 added to them, to ensure they stay below the Task that was just dropped. The constraints in the list filter make sure that weā€™re not adjusting the Task which was just dropped again, and weā€™re only changing Tasks that have an order field greater than or equal to (below) the just dropped Taskā€™s Order:

Action 3: Make Changes to a List of Tasks (the Tasks above the Task which was just dropped). Here all of the above Tasksā€™ Order fields have 1 subtracted from them, to ensure they stay above the Task that was just dropped. The constraints in the list filter make sure that weā€™re not adjusting the Task which was just dropped again, and weā€™re only changing Tasks that have an order field less than or equal to (above) the just dropped Taskā€™s Order:

For very large lists this may not be a practical solution for capacity reasons, but it is the only way Iā€™ve found to keep everything in place at all times. If you have any questions, feel free to let me know! :slight_smile:

12 Likes

Thank you, @fayewatson.

Iā€™ll put this to work shortly. The big eye-opener for me is ā€œMake changes to a list . . .ā€ Itā€™s something I simply hadnā€™t uncovered before. I suspect it will open a whole new world of possibilities for my app development.

:slight_smile:

Laurence

1 Like

Thanks, @fayewatson,

Iā€™ve developed a way of doing this that is more efficient as it updates the position value of only the things from the dragged location to the dropped location. It doesnā€™t need to reorder things outside this range.

(First, for terminology, I use Position or Posn rather than Order for the sort field name.)

In my workflow, I start with six steps that set custom state values for the position number of the dragged thing (csFromPosn), position number of the one dropped on (csToPosn), The highest position number of the two and the lowest position number of the two (csHighPosn and csLowPosn).

Next, I update the dropped thingā€™s Posn to that of the Task on which it is being dropped. This is the same as your method.

In the list update process, I execute only one of two steps. depending on whether the dragged item was dropped on a higher position or a lower position. This determines if I decrement or increment Posn for each item in the list.

Hereā€™s an example:

This seems to work just fine. There is a quirk in how the actual drag-drop elements work. After I pin down the symptoms, Iā€™ll bring that up in another topic and/or do a bug report.

HOWEVER, now I am left with a data problem. I have lists throughout my database with position fields but no values. (They werenā€™t needed since I didnā€™t have a drag-drop capability until now.) As I develop drag-drop ordering in the UI, I need to populate them with initial values. I donā€™t understand how I can rip through the whole list and assign incrementing values based on the current sort order of each list (usually based on added date.)

Without a looping construct, what does Bubble provide for updating a list with incrementing values or with values based on other items in the list?

2 Likes

Having no Loop function is a pain!

You could use ā€œChange Listā€ (limited to 200 records) and populate your missing data this way.

Not fully understanding the solution but could Emmanuelā€™s solution from this post solve the re-ordering problem? (Response 59)

I would like to keep this discussion going. More than that, Iā€™d like to get some serious attention to the drag-drop problem from Bubble developers. (@emmanuel, are you there?)

In recent months I have not worked with Bubble as much as I would like to. This is primarily because drag-drop does not work at anything approaching a professional level. If you want to know what professional looks like, take a look at the drag-drop reordering capability in the Overcast podcast player for iPhone. (If I knew how, Iā€™d post a video of how it looks.)

Without drag-drop that works in a desktop browser and mobile browser, it is not possible to make any app that involves adjusting the order of things in a list.

As an example, hereā€™s a post from @boitechat thatā€™s gone unanswered for nearly four months:

I am astounded that this is being ignored by Bubble and that Bubble app developers are not up in arms about this shortcoming.

4 Likes

+1 for the Bubble team to put this one on the enhancements list, its going to become more of a thing for us too!

4 Likes