I have a question about updating the ranks after list items are deleted.
In order to store the ranking so that it is available after a page reload I set “Ranking Enable” to “Yes” in the plugin, and store the rank for each thing in a “rank” field to the database. The Plugin loads the items sorted by their rank. Is this the preferred way to store the sort order of items in the database?
Anyway, this works. But when an item from the list is deleted, how do I update the ranks? Let’s say before deleting there are three items with the ranks 1, 2 and 3.
When item #2 is deleted the remaining ranks are 1 and 3. How can I change it so that the ranks are reassigned as 1 and 2?
In fact, the plugin performs optimally with a list of items. We advise employing a database field that contains a list of items as the data source and configuring the DragIt’s Updated List to reflect any modifications to that list.
Should you prefer to use a rank index for each item, the following method may be employed:
It might just be me - but I found a compatibility issue today with my draggable RE’s that are, mostly, a multiline field. Chrome = no problem. Firefox and Safari = when dragged the dragged item’s text was often duplicated (visually) in the replaced item. This looked worse than it is, the data was ok but the presentation layer looked like a big error. (refresh and it’s fixed). Disable text select was enabled - but I’ve found this doesn’t do much for multiline boxes.
I wasn’t loving the experience, so here’s my hacky fix:
I added a custom event into the RE which sets focus on the multiline input. I then made the input’s height to fit the content as it used to be the height of the RE (which was annoying - as you lost the grab cursor).
Now when the RE is clicked on the page, it also runs the custom event inside the RE (to focus the multiline text).
Is it glorious? No. Has the problem now gone on FF and Safari? Yes, seems so
Thank you for sharing your experience and the ingenious method you used to resolve it. We will attempt to replicate the situation and determine the cause of the problem to address it.
Having users like you truly makes the Bubble forum an incredible community.
Hi @NoCodeDataArtisan
I’m not sure if I’m doing something wrong but I am having some trouble with some triple nested RGs (an RG nested in an RG nested in an RG). When I noticed this issue on my main page, I built out a test page that strips out all other functionality to eliminate variables but event after creating the much simpler page, the issue still existed. This is my set up:
The above written out more simply:
I want to allow dragging within the Phase only (i.e. the “None → Phase 1” group with values “homeWand”, “homeStandard1” and “homeJournal1” can all be reordered amongst themselves but none of these can be dragged into any other phase group
The issue is when I filter the grandparent RG using the dropdown. You can see in the GIF below that the first two filters work fine but then the others ones populate with nothing. This behaviour is not consistent (i.e. sometimes one of the phases is populated and the other one isn’t and other random combinations).
I made another test page which is the exact same as above except that it only has two RG’s (an RG nested in an RG) and it works fine with the filter. So maybe I’m missing something but it seems there there is an issue with triple nested RGs. Also, as one final test to make sure the issue is in fact with the DragIt element, I tried removing the DragIt element and setting the data source of the most nested RG to the current cell’s Phase’s Steps (which is what the dragit data source was) and the filtering worked fine. In other words, the issue is definitely only present when I use the dragit element.
Thanks for the quick reply! And of course. I know how difficult it is to try and understand what people are talking about when they give minimal information.
Yes, there is only one dragit element inside this triple nested set of RGs. I will try what you’re saying but just to confirm, you’re suggesting to put the draggable part inside the RE? As in each of these are the RE?:
Unless I misunderstood you, it doesn’t seem to solve the problem. Here is my new setup:
And here is inside the RE called “draggable”
I took everything that you circled and placed it in an RE and then deleted all those elements and put the new RE there instead. Hopefully the screenshots show you everything you need to know. But to be clear, I am still experiencing the exact same behaviour as what I showed in my gif in my first message.
One thing I did notice is that when the nested RG’s are missing (as shown in the gif) there is an extra element created in the DOM somehow with the same ID but its great, great, great,… grandparent has a display set to none.
Here is the one that is supposed to be visible:
As I’m sure you’re more than aware, things break when there are two elements with the same ID. No idea what is creating that second element but when I change display:none to display: block, I get a second set of RGs for whatever reason:
For the record, I tested this out without the RE functionality (the way I had it initially) to see if this second set of elements was also being created and it is. So in other words, the RE does not seem to change the behaviour at all
Hopefully this helps you debug the issue? If you need more information, please let me know.
Thank you for testing the RE method, and you are correct; it appears it did not resolve the issue.
Could you please examine the DragIt states and their values through the debugger, and review its data source or other states to determine if it is receiving the correct data and populating it accurately?
I apologize for any inconvenience you have encountered.
I have scoured all the data sources and made 100% everything is correct. I can tell everything is correct from the fact that the initial view (with no filter value set in the dropdown) works correctly. It is only once the filter value is changed (which only affects the grandparent RG) that causes issue as you can see from the gif I sent.
I’ll have to find out from the app owner if this is ok. If not, I’ll set up a test page in another app and see if I can replicate the issue there. If I can then I’ll give you access to that. Will respond by tomorrow.
I have a set of records that I need to update the order of and save that order on the record. I’ve tried a couple different ways and havent been able to get it to work consistently. Could you please advise what the recommended approach is for this use case?
The DragIt works better when you have list of items and the list keeps the order of items without needing to save the order index for each item.
Using the index method requires updating the index of all items, as reordering could impact many of them. This process is more time-consuming and costly.
If you need to have the order index of the items, you can use this approach for updating the index value of items:
Hi @NoCodeDataArtisan I’m running into what I think might be a bug? Or if not I’m very lost and hoping you can help. I’ve got a group in my application where we allow a user to reorder their appointments for the day and utilize the DragIt plugin to accomplish this. We have a record created that stores each users events (“Day” datatype with a field List of Calendar Events). Reordering works great EXCEPT for randomly we find that if the user opens a popup that also references this record when they go back to the calendar it isn’t draggable anymore. We’ve tried all sorts of options and workaround but it seems like if we ever display this repeating group it breaks the drag until we reload the application. I’ve recorded a Loom walking through this use case in the hopes you can help us identify and resolve this issue. Thank you!!
Concerning the problem you encountered, it seems there might be a shared attribute between these two elements. Are you using a single DragIt instance for both, or could it be that their IDs are identical?
@NoCodeDataArtisan thanks for the quick response. The RepeatingGroup that is displayed in the popup doesn’t reference the DragIt element at all. It’s doing a search through the db to get a Day record’s calendar events. This popup is displayed when the user adds a calendar event to a day from a different place in the app from where they would reorder the events via DragIt.
