[New Plugin] Swapeasy - Drag and Drop Group & RG 🪄 Transform your pages into personalized drag and drop interfaces

Absolutely. We’ll have more updates for the web version soon, and a mobile version as soon as we have full access to the mobile plugin editor.

Nice work! And yes, this is how a demo page for a plugin is done :clap:

Thanks @luke2
Your comment is fuel.
Thanks so much for the positive vibes brother!

#tamojunto :oncoming_fist:

Really trying to love this plugin but still struggling.

Is there no way to reset the predetermined order?

What I’m trying to do is swap items around in a repeating group. They are reordered by order of the list in the repeating group which is working just fine. However, it seems the plugin is not able to reset the order to what is displayed. Ideally I’d just like to set it back to 1,2,3,4 etc as I can reset the items in the repeating group. I’ve also tried a variety of saving the order to the DB and using the automatic method and even overwriting that with a local storage step but still no luck. :frowning:

Hey @kara, thanks for your feedback.

I’m not sure I understand what you’re trying to do, sorry. Are you able to reorder the repeating group but can’t reset the order through an action?

Is your repeating group using Option Sets or Datatype as data source?

Thanks for writing back. It’s likely easier to understand via a loom here.

The repeating group is a datatype that is then saved in a given order on another data type.

Hey @kara , I was watching your video and here are some considerations.

1 - Automatic method

When you use the automatic method, both saving and restoring the order happen automatically, without any need for other actions. Using the action to set a custom order is only necessary when you want to reset the order to a specific order at some specific moment of user interaction or based on some condition.

2 - Correct format

In your video (0:07), you show your structure and we can see the order “1,3,4,2” saved in the local storage, but as soon as you open the popup, this order is set to “1,2,3,4.” This happens if you have an action that sets this order when opening the popup or when the plugin doesn’t recognize the provided order because it has an incorrect format (and this seems to be your case here; both the automatic and manual methods would fail in this case).

3 - Why the issue is happening?

When you try to save the order, you use an expression (video 0:40) that attempts to generate a correct order sequence. But the expression you used returns the wrong format.

What should be “1,2,3,4” is returned as “1, 2, 3, 4.” Notice the space between the numbers in this second string?

I am not sure why you are using this expression, maybe some workaround to try to reset the order? Let me know if you need to use the correct number sequence in any specific use case and we can include that in the next update.

Anyways, I am not sure how you are using the find & replace and if you are using something inside it. I replicate this using a find & replace (empty) and got the same value you got. But even without the find & replace you will see that the same value is returned and it is cause because the nature of the expression itself.

Then you are saving it in the wrong format (video 1:40), we can see this in the DB, and then you are trying to restore it later, but the plugin ignore this since it is invalid.

I’ll run some more tests with your approach, but could you check if this fixes your issue and let me know later?

Thanks so much for your help. The issue was in fact the spaces between the order. Not sure why Bubble has them automatically added and it doesn’t seem possible to remove.

For others possibly reading this I just used another javascript expression to reorder rather than using the Bubble built expressions.

In terms of why I’m saving a reordered list of items - I need to save them in that given order as that’s how it loads in the table view. I’m sure there are other ways around this like not saving items as a list and giving them an order data field but that’s what I found to be the most straight forward given Bubbles other limitations with repeating groups.

Well, if you really need this in this way then you can use “format as text” operator.

Order split and converted to numbers, then sorted:

Order split and converted to numbers, then sorted and formatted as text:

Here’s a slightly different issue of what I think is a bug. On load, I can only grab the first item but once I resize the window then I can drag and drop any of the items. See the example video here.

Thanks again Kara, we’ll take a look at this.

Love the demo page!

Running into a couple of issues with adding it into my app:

  1. When I drag to re-order, it suddenly squishes one of the other draggable groups (the screenshot is on mobile browser, iOS Chrome, but it’s also happening on desktop, MacOS Chrome).
  2. Specifically on mobile browser (I’m on iOS, Chrome), the plugin seems to prevent me from scrolling down the page if my finger starts on any group that is connected to the drag/drop (enabled is “no”). If I hide the “Swapeasy – Main” element, I can scroll fine.

Any ideas?

Hi @simon.peacock, thanks for your interest in the plugin. Could you share your drop area and draggable element settings via PM?