Now I know what you’re thinking, "Another drag and drop plugin…? "
I found the already available options were trying to do too much at once and none of it really well.
In particular, lists of texts or numbers were hard to wrangle since I had to try and correlate the new order of my list as a list of cell indexes with my original inputted data.
So I set out to create a clean, easy to use plugin that made this a breeze.
That’s how I came to build Simple Sorter: Drag & Drop
Using Sortablejs in the background, you can easily define the data you want to sort and access an always up to date sorted order. Whatever data type you put in, you get back, just in your new order.
Additionally, I included a backend action to find the index of an item so you can update an order field on a list of things if needed (something I also found difficult with the other plugins). My demo app doesn’t have backend workflows but I have included instructions on how to set that up.
I plan to add more customisation to the plugin so you can choose how elements look when being dragged.
Have a play around on the demo and let me know what you think!
Great catch! Turns out it was caused by me hiding the repeating group for the skeleton loading logic.
If the target RG isn’t visible when the Simple Sorter element is visible, it can’t create the Sortable instance. For some reason it only effects mobile browsers.
I added that to the list of known issues on the page and will play with the mutation observer and see if I can fix it properly but it should be working now on mobile devices.
Tried using it with the Bubble table element and it was including the header in the sorting.
Took a look and was able to exclude the header from the sortable elements and pushed that feature live.
If you want to have sorting while using the Bubble table element, just check the box ‘Is a Bubble Table’ and you’re good to go!
I have nested RGs inside of other RGs so its cruciual that the List ID can have a dynamic value. Is there a way you can make the ID dynamic in the plugin? Otherwise I can only reference specific objects instead of building dynamic IDs, which is what I currently do
Sure thing! I’ve just made the List ID field dynamic. Just upgrade to v1.2.0.
For the nested tables, I recommend setting the animation to 0, otherwise you get some weird jumping behaviour on the nested elements.
I’ll see if I can fix it properly but this is the workaround at the moment.
The # (id) and . (class) are the two different types of selectors you can use to identify which element is the repeating group.
You don’t need to put either character in front of the string that you put in the ‘Element ID’ field.
The default for this field is a # but if you are using the classify plugin, for example, you could identify the repeating group by a class that you apply to it.
If you’re not using classify or any other CSS plugin, just put the # with your string in the List ID field on the Simple Sorter element.
So, in summary:
The repeating group element ID is “example” then the List ID field value is “#example”. If you’re using Classify, the. The Lost ID field value is “.example”.
My plugin somewhat supports it, but if I’m being honest, not very well. It works but the behaviour is janky.
Due to some Bubble specific quirks, there’s an additional layer of logic that is needed to make it work cleanly. Something I am not able to prioritise adding in the foreseeable future.
When I was researching this previously, I found the Drag It plugin by @NoCodeDataArtisan and Swapeasy plugin by @tulioportela have already built the logic to handle this and I’m note sure I would be able to do it better than them.
I would recommend going with one of these two if nested groups and moving elements between them is necessary for your use case.
