[New Plugin] Simple Sorter: Drag & Drop

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

Plugin page: Simple Sorter: Drag & Drop Plugin | Bubble
Demo: Simple Sorter | DragDropDevelop

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!

2 Likes

What’s it supposed to do? I tried it and I couldn’t see anything happening when I tried to drag the boxes.

Hey, thanks for checking it out!

The first drag and drop is with a handle so you need to drag it from there. The second can be dragged from anywhere in the cell.

ScreenRecording2024-02-15at09.18.00-ezgif.com-video-to-gif-converter

If it’s not working for you, could you let me know what type of device and browser you’re trying it on?

2 Likes

It doesn’t work on my iphone

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.

Thanks for testing and sharing what you found!

1 Like

Just released a proper fix for that issue!
Hiding and showing the RG is now no longer a problem :+1:

New feature released!

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!

Check it out here: Simple Sorter | DragDropDevelop