I am working on website and i reach to difficult feature where i need to move the text in the repeating group around the image !! How i can move the current cell in the repeating group in the image ? and if that possible how i can save the current position for the movable text in the database ? any plugin or helpful thoughts really appreciated
If I understand you want to resize the repeating group in real time? It might be a little more complicated than you’re anticipating but if I understand what you’re trying to do you can probably do it with this plugin.
If you want my thoughts: that’s going to be a lot more work than changing your UX and building a few extra elements. Is it at all possible to show the image in a popup, or beside the text, etc…?
Anyway if you succeed in moving it let me know. I’d like to see it 
Thanks a lot for your reply and trying to help , actually you are right making things simple is always more clever , but in my case moving the text (Not resize it ) is a game changer to my app and provide main feature to the art work in the app. I have found these 2 resources that may help me but :
1- First Plugin - Fabric JS [ This plugin in not ready yet and still remain some work to accomplish it ]
2- This Plugin from zeroqode : https://zeroqode.com/plugin/image-annotation-1538732397082x262724476753149950 , notice how you can move the pin when click on the " Allow marker position " , but in this plugin moving the repeating group or current cell in the repeating group not working or i can’t implement it correct especially that i am trying to move text in repeating group and not an image !!
Okay. It’s a challenge to help you out without a lot of context, but I’ll keep trying 
Can you move the entire repeating group instead of a single element in a single cell? If so, you can probably do something with this:
I stumbled across moving draggable groups (look for drag/drop plugin from bubble) with a workflow action. You could place your repeating group in the draggable group and move the whole thing. I don’t know if that’s your intended behavior. I’m presenting this option because it’s “no code”, but if you want to keep it responsive you may need to set up media queries and use javacript to dynamically move the group. Keep me posted.
Hi , Thanks a lot man for your support and help , actually yes this plugin seems the wanted one , i can now move the "current cell " within the repeating group , however i am facing 2 issues :
1- How i can drop the current cell in the wanted position ? i have tried to make a work flow when i click on the text "current cell " but it didn’t work
2- How i can save this position to the data ? for example if i redirect to final result " in my case i called it design page " [ my point is to make the current cell display on the same position after drop it on the image ] , i will try yo make a custom state ,maybe it will work
Oh good I’m happy we’re getting somewhere
I think you might be getting the “bT” error because you first built the workflow and then tried to move the element into the repeating group (hereinafter “RG”). I am assuming the reason is that the “parent” or “original” group is now gone on runtime and only exists for bubble to duplicate all of the RG’s cells. I hope that’s clear enough, if not let me know.
Repeating groups are very flexible and super easy for us non-coders to use, but they limit the customization we can get from them. I don’t think you’ll be able to use this method WITHIN the repeating group, which is why I originally suggested you move the ENTIRE repeating group…Alternatively, if you build out individual groups instead of using the RG you’ll have full access to all elements.
- Exactly. Store it in a custom state and call it whenever you need it. Alternatively, you can write it to your database, if you need it retrieved on page load. Careful writing to your database is about eleventy times slower than writing to states.
Gl, keep me posted 
Hi , Thanks again … if i understood what you explained , I think yes you are right , it seems moving text that exist in the current cell in the repeating group then drop it on a random position on the image ( outside the current cell ) not possible ! but what if i move the "drag/drop Group " and drop it in the"Drop Area " that exist in the same current cell in the repeating group [ Kindly check the screen shot ] ? I have tried this option but it didn’t work either !
- Yes i can move the whole repeating group "on the image ,i can consider this as a secondary solution for my case , however i really appreciate if you can explain why i can’t or if it is possible to move group"drag /drop"and drop it inside the "Drop Area " in the same current cell of a repeating group !
Best Wishes
Make sure that the drag drop group is NOT a child of the drop area and everything should work within the cell, I think. If it doesn’t and you’d like some help troubleshooting, share a sandbox with me and I’ll take a look
Hi , please take a look : https://searchmyrecipe.bubbleapps.io/version-test?debug_mode=true
Thanks in advance
Yes if you’re comfortable, please share an editor link. It will be easier to see what’s goingon.
If you want to you can send me the link privately.
Oh. You’re trying to leave the text where the user dropped it, but load it that way in your repeating group? With the text in the same place your user moved it?
Yes that’s correct ! please check the editor : https://bubble.io/page?name=index&id=searchmyrecipe&tab=tabs-1
Okay I don’t think I can help you using that plugin. You’re on the forum asking for a custom solution for a complex problem and I don’t know that this is the right medium for you to find it. As I mentioned in the very first post, this is a CSS problem.
You have a set of elements for inputs, and a set of elements for display, which means your drop groups will never “stay” because you’re not actually showing them on “display” with your set up.
What you need to do is actually store relative distances of your elements from your parent border using javascript (look at plugin “toolbox” by mishav). Then you need to apply those same distances from your input element to your display element. I think (I don’t actually know this) that there’s an extra layer of complexity because you’re putting them in a repeating group and therefore you can’t simply assign a unique id to the element.
If you’re dead set on this, you can either spend the time figuring out how to do it with CSS. Depending on your background and financial situation, you may want to hire a developer to help you with this, as what you’re trying to do is complex. Chin up, doable on Bubble (I think), but I’m out of my depth here.
You can alternatively and simply just move the whole RG.
Good luck!
1 Like
Thanks a lot for your support ,i have selected the simplest method as you mentioned ( moving the whole RG ) and it worked fine with me … i will try with some other related plugins and check if it can work , i will keep you update if any progress happen 
Thanks again ,best of luck
Awesome that that worked out!
Hi @duke.severn , i hope you are doing great , i have reached to a difficult step while i am building my app , and i wonder if it is possible to complete this step !
-
Please check the link if you can : https://bubble.io/page?name=index&id=draggablecopy&tab=tabs-1
-
i want to let the user create text comics and drop these texts on the image , BUT :
1- How i can drag/drop each text on random places of the image ?
2- How i can save the new position and let it display on the "Result page " ?
I really appreciate your support if you can or any advice/resource you can give it to me
Thanks in advance
Hi,
It would seem we’ve come full circle. This was the original question, which we solved by changing up your design, instead of learning to code javascript and pull relative distances. The thing is that I would need to actually spend some time on it to figure it out and get it working in all of the configurations possible.
Advice - spend some time mastering the css tools plugin and toolbox plugins to find out what the drag/drop groups locations are when the user saves. Then apply them to the display element. The problem is that this might get heavy if you code it wrong. All the leads you need are in the thread above. Now you just need to decide if you want to put in the time.
Again, same alternative advice as before, if you want hire a dev to help you that could really accelerate your process. If you need a recommendation, PM me, I know just the guy who could help you.
I’m not sure if I’m understanding correctly, but just a quick tip I found out:
The Drag&Drop has a workflow action to move Drag group to a specific co-ord on the page. You just click “diasble drag” then you could move anything around
Hi @duke.severn thanks for the advice . can you please send me the developer name or if you mentioned him ,i appreciate that
Thanks in advance
This topic was automatically closed after 70 days. New replies are no longer allowed.