[New Plugin] Drag It - Enhance Your Repeating Groups with Drag-and-Drop Functionality: Rearrange, Sort, Reorder, and Transfer Items Between RGs Effortlessly

Hello @manipaje

Did you try the Dragged Item:
image

1 Like

This is the answer - I had not looked at the Conditional area for a solution. Thank you - one more piece in my puzzle is resolved! :heart:

I am not sure if the next part is a Dragit problem. When I have a group focus inside a dragit, and I move that dragit item between RG’s it will cause the GF to become duplicated. The duplicate / replica loses track of the parent and causes it to ‘fail’ into the top left X/Y 0/0 position. Another, duplicate GF is also shown, as expected, within the parent RE. It happens only as a result of the parent dragit being dragged outside of a repeating group and once it’s duplicated, it’ll show each time that dragit item is selected (which causes it to display) and it’ll do this until I can send it a specific, workflow based ‘hide’ condition.

I’m sharing it here as the more I look, the more it seems to be linked to dragit between RGs.

I’m also exploring hacks to hide / kill the duplicate but it’s persistent and consistent!

1 Like

Did you try to use Drag It’s events to hide the GF when it is visible?

image

The console errors were claimed to have been resolved in previous updates in live mode, but I am still encountering console errors in live mode

1 Like

Hello @onerbarisoner

I will take care of it quickly. Thanks for letting us know about it.

1 Like

Hi @NoCodeDataArtisan, I went through a couple of plugins and this is probably the plugin looks the most lightweight and almost exactly I’m gonna get to make my life simpler for a drag and drop segment I need for my project.

I have a few questions on how I can do this with Bubble and the plugin:

  1. User drags and drops to desired positions of choices. In each of the choice, there is a value that is not visible on front-end e.g. user positions drag and drop choices in this order: Apple, Orange, Banana

  2. Behind each of the choices, I need to have a value that is an API data call. e.g. Apple = APIDataCall3 = Afghanistan; Orange = APIDataCall1 = Oman; Banana = APIDataCall2 = Belgium

  3. I then use Workflow to display result in a Text element on front end, in the order - Afghanistan, Oman, Belgium

1 Like

Hello @Tinkero
Sorry for my late response.

It makes us happy that our plugin can make things simple for you and we are here to help you have valuable experience working with our plugins.

Are they three different API Calls, or can you get them as a list of data?

+1 would love to see working with nested RGs better documented, @NoCodeDataArtisan. It’s not exactly intuitive as this is not required for the first “layer,” and I spent a couple hours trying to solve this today before finding this buried in the the forum.

As Erick said, this works like a charm. The plugin is incredibly powerful & has already saved me so much time! Thank you! :raised_hands:

1 Like

@NoCodeDataArtisan Thanks for the great plugin! It’s truly one of the best I’ve seen on bubble, but I’m unfortunately running into the same limitation Ken1 describes above. I have a very similar use case described above (one page app, many Groups/RGs not visible on page load, but that can be made visible by user actions). I desperately need the ability to reinitialize dragit to RG pairing when a new group comes visible without having to reload the page.

I’ve spent hours to try to kludge together a workaround assuming there must be one, but have not had any luck. However, it seems the “Initialize a Dragit” action you’re describing here is exactly what I need. Unfortunately, I cannot find any documentation on it, nor can I locate it in any menus.

I suppose I could try to trigger a dragit element reload using a js snippit, but I wanted to check with you first, as I assume I’m just missing something obvious.

Is there something I must do to enable the “Initialize a Dragit” action for my app? :pray:

Dan

1 Like

Hi @danschlung
I hope you’re doing well.

Thank you so much for your kind words about the plugin :star_struck:


Regarding your challenge, there is no need to use any of those actions. When the Auto Sync option is yes, Drag It update itself with any changes.

@ken1 helps us to add features that make these situations as simple as the basic implementation of the plugin. You can put the Drag It and the linked RG to a group and change the group visibility according to your use case. (check the Collapse when hidden for the group to avoid loading them)

You can also put them in a reusable element and change the data source to display diffrent items.

Thanks for the quick response, @NoCodeDataArtisan . Unfortunately, even with these options checked, it does not work as you are describing. See the below Loom:

Summary:
My Problem:

  1. I have app where, due to some of bubble’s limitations, I’ve had to set up two repeating groups that pull the same data. Users are only able to display one RG at a time.
  2. Only the RG that user sees on page load retains it’s full dragit “dragging” capability. Data seems to sync fine!
  3. When the user switches their option to view the other RG instead, they must reload the page to get the Dragit to for the dragging functionality to be restored.

Configuration:

  1. Visibility:
  • All RGs and their parent elements up to and including the Dragit element, are set to “visible on page load = yes”
  • User-facing visibility is thus managed through the visibility of each RG’s sub-elements (i.e. text fields), and by setting RG’s to collapse when empty
  1. RGs
  • The first RG is pretty standard, with only one level of data
  • The second RG has 2 levels of data.
    ++ The top level RG is a category name
    ++ a second level RG that contains the data filtered to map to it’s respective category.
    ++ The second level data references a RG with a dynamic ID
    ++ All 3 RGs currently point to the same data source

Things I’ve attempted:

  1. Moving the Dragits:
  • higher up in the page hierarchy, which causes scoping issues, breaking the connection to the RG
  • Within the RG itself, which doesn’t work since the dragit element is loaded within and after the the element it’s referencing
  1. Source Data
  • Mapping the data for each RG to the same source data
  • Creating a “dragit” hierarchy, where one dragit serves as the main list aggregator, and the other draggits reference the primary dragit’s for data, then sync downward to their own respective RGs
  1. Played around with the dragit Grouping, though to be honest the documentation on this is 1 sentence, and I can’t find any examples online, so I don’t think i really understand how it works. I’m also not sure this is the issue, since the data always sync fine, it’s just the drag function that breaks when i switch between repeating groups
  2. Verification that all dragits reference only one RG’s unique ID
  3. Verification that all dragits are set to auto sync

My Conclusions:

  1. The issue seems to be with the dragging functionality only (the data always loads correctly :+1:t2:)
  2. A quick solve for this would be to trigger an action so that when any group is made visible, it re-instantiate the dragit pairing. Though it’s referenced above, no such action seems to be available.

I must doing something incorrect, but am having trouble locating documentation to help me. Thanks so much for reading this long-winded response. Looking forward to hearing back!
Dan

1 Like

Great job on your app, I think it could be really helpful for everyone. :star2:

It looks like what you want to do should work fine since it’s a basic thing. :thinking:

Can you add my email as a developer so I can look into the problem and help fix it? My email is shoeibi.mahtab@gmail.com.

Thanks!

Thank you, @NoCodeDataArtisan!
Unfortunately, my app level (starter) doesn’t allow me to add collaborators unless they have agency plan. I’ve been out of work for a while and can’t afford the upgrade to the next level until I go live and start getting some revenue.

If you have an email associated to an agency plan, just let me know and I’ll add you! in the meantime, best i can do it update to “everyone can view”, which i’ve done.

1 Like

There is no problem, viewing access can be enough. :+1:

Please send the editor URL to me as a private message.

1 Like

thank you! just sent you a chat :slight_smile:

1 Like

Just wanted to update this thread for future user reference. @NoCodeDataArtisan was incredibly helpful & gracious over chat and was able to help me resolve the issue in minutes.

The issue was when I updated my page to get rid of my old RGs & switch to Dragit, i had left my visibility conditionals pointing to a group (the target RG) that did not contain the Dragit within it’s scope

I’m incredibly happy with the level of service provided, and the power and simplicity of Dragit. Definitely encourage everyone to purchase!

2 Likes

Thank you very much for providing this information and leaving the awesome review for the plugin. :heart_eyes:

Sorted RG breaks when updaated to 3.4.0. It works on 3.3.3/3.3.4.

On 3.4.0, the following error occurs and the RG shows blank:

This isn’t critical for me as I can just stay on the old version.

1 Like

Thank you for letting us know about this problem, we will fix it in the updated version.

Thank you for helping us improve the plugin. :pray:

1 Like

I will say this is probably the best dragable repeating group plugin with the best support, so great job.

3 Likes