FLOPPY: Plugin for localStorage, sessionStorage, IndexedDB storage, List Creation/Manipulation, Iteration, and More! Now with even more video docs!

Generous offer but I will pass. I rather pay and support the maker. :hugs: besides I would love to pay back in helping you navigate the new engine.

I’m definitely going to add this to a couple of my apps. I just have to finish this one big feature for a customer tomorrow.

Did I see an option named trigger to sync? Is that something that if set to yes it will kick off the specified backend workflow?

Also, does drag and drop work if I have a repeating group of columns and nested inside of it a repeating of group items? And the items can be dragged between each column?


Hey @rico.trevisan, I haven’t played with nested repeating groups and drag/drop. It will probably work in some cases but not all…

I’m still finding little bugs because the sortable library turns out to be a bit of a mess. (For some reason, touch events don’t send data properly. I already fixed one issue related to touch vs normal drag events, but cross-RG drag/drop on touch devices doesn’t work correctly and causes a crash in current version. Very frustrating, but I’ve not found anything better, which is sad.)

Apparently subscribing to a plugin (instead of purchasing it) when the Bubble app is on an yearly plan leads to a lump sum payment for the plugin.

I guess I just found a novel way to tip you, Keith.

1 Like

Hey @rico.trevisan - I’m not quite sure what that means (are you saying that if you’re on yearly and you subscribe to a plugin Bubble bills you at 12x the monthly sub immediately? that seems weird).

But also, just pushed a bugfix for the issue I was whining about in my last message!

BUGFIX UPDATE: I just pushed Floppy version 1.9.26, which fixes (as far as I can tell) an issue that caused drag/drop across repeating groups (“Drag Group” feature) to fail when used on touch/mobile devices. Go and get that if you expect the drag group feature to work with touch.


I think that’s what it does indeed. It warns before doing it. I think it will charge the remaining months until the app’s subscription due date. The value hasn’t shown up in my billing overview yet to confirm.

Ooooh, well, if Bubble charges you $72 for that Floppy sub, I can float you a couple of gratis installs, @rico.trevisan … but only because you are THE RICO.


Little update: Just pushed version 1.9.28 of Floppy which adds a couple of new touch-related options for the drag/drop configuration and also fixes a bug/behavior issue that could happen with drag/drop if the user logs in or logs out.

(Commentary on that in part 2 of my “My Sinatra Gallery” video, coming soon.)

I’ve never actually run into an issue with plugin update functions and login/logout, but TIL that a login or logout makes plugin update functions run (I assume because of the change to the context object) and this was resetting the sortable behavior in a bad way. Fixed (mostly, I think).

:point_up:other plugin builders – take note and betcha didn’t know this…

1 Like

Interesting. What did you to fix it?

1 Like

I certainly didn’t know it!

1 Like

@rico.trevisan, well, in my particular case one of the things that the update function in the Floppy element does is finds the parent container for the cells of the repeating group (if we’ve configured the “sortable” settings) that we want to make sortable. As part of that, there’s a property on instance.data that should either be null or a reference to the container. In update I was first setting that to null and then doing the stuff to configure sortable, but there was also logic that, if the sortable already exists, don’t recreate it. So basically, it would lose that reference on an unexpected update. (Easy enough to fix, just also check that if the container reference is non-null, don’t null it out again.)

This isn’t really as flexible as it should be ATM. The main interface to Floppy isn’t really intended to be something where the field values should change (they are really just the basic configuration and it doesn’t make a lot of sense for a Floppy to reconfigure itself entirely). However, that’s a thing the Bubble programmer could do, and it should support that. (Though it would be weird to take an existing Floppy and change things like its data type or change the storage keys its targeting, or change the RG that it’s targeting for sortable behavior, etc., it’s something that someone might want to do. So I’ll probably rejigger the update stuff a bit more in future.)

1 Like

Hey @vini_brito - yeah, it’s something I’ve never really seen cause an unexpected issue until working on the sortable behavior in Floppy. (And I noticed it because in a demo page I’ve been playing with – which has different behavior for a logged in admin user [me] and a regular-old visitor – that the bug I explained to Rico sometimes got triggered.)

I suppose in most plugins this wouldn’t necessarily cause any perceivable issues. Your plugin either expects to see a lot of dynamism in the main interface fields (e.g., ListShifter, where we expect “List to Shift” in particular to change) and it handles that. Or it’s designed in such a way that when it updates… well… it just updates/resets. Or it might be a “run once” type of thing (e.g., at the start of update if (!instance.data.initialized) return). But obviously, in more complex plugins this is a “new” thing to take into consideration.

I can’t recall this being documented anywhere, for sure.

1 Like

Here’s a Part 2 of my demo of using Floppy’s drag/drop features. In this video, I talk about how we can make items drag/droppable between Repeating Groups using the “Drag Group Name” field in the main Floppy interface. I demonstrate the different options you have (such as allowing an group to accept or reject new items, enforce “Bubble style” no duplicates behavior, and other options. Along the way, I discover a slightly funky behavior with drag groups that may or may not be a bug… I’m still not sure! Anyway, enjoy some (shorter! just 17 minutes) with @keith:

Edit: And I did find and fix a little bug that was causing Floppy elements with “drag group” set to always have the same drag group name. However, fixing this doesn’t seem to change the behavior of the sortable instance. (Basically, it looks like if an element can receive items, it will accept them from some other source. It’s possible I misunderstand the sortable API here and will look into that more in future. Certainly not a deal-breaker, but not the behavior I was expecting!) Anyway, that change is in Floppy 1.9.29 which I just pushed.

Also: the much longer Part 1 of this tutorial is here:

1 Like

This issue is the same with Bubble’s own drag drop. A droppable area accepts pretty much any draggable.

1 Like

Hey @ihsanzainal84 - good info! I was not aware of that. In actual practice I don’t think that this limitation/weirdness makes much impact, but ideally I’d like it to work as the sortable library imagines it. (Though I have to say, I’ve discovered plenty of edge cases where sortable does not work as described and I’ve already worked around those.) The way I’ve implemented the library, I’m being very specific about what things are draggable and what are not (via CSS classes) and I suspect that doing this breaks the exclusivity of the “drag group” feature in “vanilla Sortable”. There are other such cases.

1 Like

Also, @ihsanzainal84, I greatly appreciate your attention to the ongoing evolution of Floppy! I’m on the cusp of install/user 100 (which is gratifying if not lucrative) and feel like I’ve not really had much feedback. In one sense this is gratifying (“I catch the bugs first!”), but in another it’s disheartening (“Hmm… I guess this thing is overbuilt.”). But at the end of the day, I build these things to address my own concerns over Bubble’s shortcomings and solve my own issues in a way that might be helpful to others.


Thanks a lot for these 2 videos keith! Very helpful and eye-opening as to what we can do with floppy!

1 Like

Hi @keith

I’m using your Floppy plugin for the drag-and-drop feature in the repeating group…

I’m using another plugin Multiuploader to upload a list of images. Then I want to use your plugin so the user can rearrange the order and then store it in the database.

I haven’t figured out how to display the list of uploaded images in the Repeating Group (before I used Multiupload file as Data Source, but now I guess I have to use Floppy as Data Source).
Or maybe I haven’t used properly Floppy Initialized (which means the Floppy is empty).

I have seen your editor where you use Data Type as the source (which in this case you are reading from the database).

How to pass the values from Multiuploader to Floppy?

Currently, I’m using as the Floppy Initialized Add RAM Value(s) Floppy Multi-Uploader (where Multi-Uploader is the name of the Floppy), and in the Add list of Values I’m using mulltiuploader A’ files (which is the multiupload plugin and contain all the files uploaded).

In the Repeating Group (as I said above) I’m using the Data Source: Floppy Multi-Uploader’s RAM List Values

Files are uploading but I see nothing in Repeating Group.


Have you watched my videos on this feature? You must feed the sortable RG from Floppy’s RAM List.

I’m watching it… I’m almost at the end.

And that I’m trying to do… But the Floppy must read the values from Multiuploader and I think I’m stuck there…