I’m encountering a problem when using Bubble’s Drag and Drop plugin and I’m can’t find a way around it.
I put a DropArea and a DragDrop group on the page. I want to move the DragDrop group to a set location once it is dropped on the DropArea. I can get it working perfectly but the action to Move the element causes a bubble ‘issue’ so I can’t deploy to live.
I’ve traced the problem to the checkbox ‘Make this element droppable’. Toggling it on/off toggle’s the issue. And, when it is on, the Move action has an element name of bTToV0.
Does anyone know how I can get around this please?
I use drag and drop extensively in my app…its actually the foundation of the app…as such ive pondered and spent much time perfecting. …and have done so for some time. now i might be wrong but you cant have both. if you make it drop-able and then try and apply the action to ove…it will throw and error. whats your use case
1 Like
@Bubbleboy - I am building slide to delete functionality on RG - iOS style. It works beautifully but throws that error. Thinking it might be the RG, I created a blank page and placed the two elements on it. Then set up a Move Action under the DropArea. Then checked the ‘Make draggable’ checkbox and the issue appears without an RG and with only two elements on the page.
why make it droppable? no need. try this:
- Create droparea…lets say 200 px wide and 25 high
- Create a drop/group and place inside the drop area constrained to parent …make that say 25 x 25
3 add an input and hide it getting the x position of the dropgroup… actually don’t hide it yet.
- preview and drag your dropgroup you should see x coordinates…perform and action based on x position and then what ever you want
1 Like
@Bubbleboy I want to give you a hug. I’ve just been experimenting with removing the droppable and was getting somewhere but not where I wanted. The input to get the co-ordinates is what I was missing. I’m going to grab lunch then I’ll dive in and build it. Thank you.
Since you are a drag ans drop expert, my next challenge is even more difficult. I need to create something like this https://www.npmjs.com/package/ionic2-super-tabs using bubble?
I will have many tabs (dynamic and loaded from a DB table) so some will be off-screen. I need to allow the user to swipe either the tabs area or the content area below and have them move back and forth.
Can you think of a combination of Drag and Drop and RG horizontal scrolling that might be the best starting point?
don’t go with the horizontal scroller approach that will not work…too long winded to explain…it won’t…you are far better to take the approach of animate groups based on gestures…especially when you are across devices and responsive…you get the same effect…if that’s what you are after. i use hammer.js and @mishav awesome toolbox but check the plugins… you should find detection zone that does this
Thanks @Bubbleboy I’ll try that if I ever get the Swipe to Delete working. I’ve spent hours and I can get it to detect a swipe left (<0) and I move it to -100 (based on co-ordinates) but after that I can’t get it to detect swipe right. I tried >0 and >100 and >90 and anything I can think of but nothing works. The input value is not much help because it seems to freeze the moment a workflow is triggered so I can’t see what the draggable group’s X value is, is it -100 or -20 ish as I am seeing? Have you any tips on movement (co-ordinates or relative to another element)? I’ve tried both and I can’t make swipe right work.
I’ve made a sample app with the exact sizes and settings I am using so you can do a quick sanity check for me @Bubbleboy when you have some time.
@Bubbleboy you are off the hook. I got it working. Your suggestions got me thinking about the challenge in a different way which helped. It’s not straightforward so I’m documenting it now and will post it on the forum to help others. Many thanks for your help.
@patricia did you ever document and load this onto the forum? Wondering what the solution was.
Cheers
@boston85719 my apologies. I am no longer active on the forum. Haven’t been around for almost a year. To be honest I can’t remember exactly what I did but I do recall I hit more trouble and the solution was to use Zeroqode’s plugin Swipe to Workflow Action.
