Drag&drop area in new responsive engine

+1 on this one! My app is useless without this… Filed a bug about it.

I have exactly the same issue…Eventhough the responsive engine is in beta, in my opinion, at least the plug-ins made by Bubble should have been updated with the release of the Beta…

1 Like

+1000 Updating this to work with the responsive engine would be much appreciated

Any update on this anyone?

3 Likes

@nick.carroll any updates on this being implemented?

Drag and drop is a core functionality of many apps.

1 Like

Queued for our next sprint!

12 Likes

@nickc Drag and drop in the element tree would be cool for the new engine too. :blush:

5 Likes

Hello,
Happy to know that it scheduled. But does it means that the plugin will be updated in next week, next month, in 3 months :thinking:
By the way, the new engine is fantastic
Thank you
Elena

Happy to hear! We use this everywhere as well.

Looking forward!!

Same situation here! Would love to see this be the top priority of your sprint. Love the new responsive engine. But my app is handicapped without the drag and drop working properly…

Hi All! Bug fix for this went out yesterday afternoon. Let me know if your draggable elements are still misbehaving. Thanks!

2 Likes

Hi @nick.carroll ,
It seems that the Drag/drop group + the Drop Area are not responsive. It behaves as they have fixed-height & fixed-width.

3 Likes

Thanks for pushing out that initial fix @nick.carroll. I was so pumped when i saw it when I saw the change in the editor

I am seeing alot of improvement with the plugin, but it’s still appears to not vertically or horizontally resize according to its child elements. To @elena point.

Thanks for flagging - will dig into my test app to see where there might still be bugs.

4 Likes

In some tutorials, they say that responsive pages should not be fixed, but if we do that, we can’t drag & drop because the group goes up in a fixed spot. But, I am seeing some videos that you can actually drag & drop groups.

Hi Nickc,
While you are at this, would it be easy or possible to add a way to trigger actions when drop area is dragged over? Right now there is only a “drop area has group dropped on it” event.

What I am trying to do is to create an UX for a kanban board where user is dragging the column around to arrange the board. When the user drag over a drop area, an empty area expands to indicate the drop area.

Right now I am having an empty RG column with drop area in there. The idea is when this drop area is dragged on, it will expand to show a bigger empty area. But I am having problem to have it stay open. My initial drop area is small (10px), when it is drag over, it expands. But as soon as I move the drag/drop group a bit more, the drop area closed again, making it almost unusable for user experience.

If the drag over can trigger an event, then I can use set state to keep the drop area open (I assume).

Do you have suggestions? Is there a work around? Or can that be a feature? While research this, I saw many users using this to build kanban board. It will be a great UX enhancement. It will also save me a tone of time too.

Also, my app is for both desktop and iPad. The responsive engine works well on the desktop. However, once it is on ipad, it:

  1. loads the RG very slowly;
  2. some of the scrolling that is working fine on desktop, doesn’t work on iPad

Thanks!

Grady

Drag&Drop1
Hello Grady and @stefan1 ,
I suppose that @nick.carroll did an update because I was able to make my drag&drop element responsive as well as to change the size the drag&drop area.

2 Likes

Hi Elena,

Thanks for posting the screen video. Yes, I agree that those are working. I was describing a different situation. From the video you are showing, I can see that the drop area box expanded. However, I want the drop area box to stay open and allow me to move the drag item in there. My drop area was initially set to 10px wide. Then a column of 320px is drag on it to make the 10px expand to 320px. There is a point where the 320px column drag over the 10px column, and the 10px column expanded. However, if I move the column a few more px over, the expanded column shrank back to 10px. I was expecting that after the 10px column expanded, I will be able to drag the 320px in it with more “room” before it shrink back to 10px. So, I don’t think it is a bug but want to see if there is a way I can make the expanded column stay expanded for longer when I move the column over it.

Also, when I run the app on iPad, what was working fine on the desktop suddenly took very very long time to load and sometimes frozen… Particulary, I was using the Max Height xx% to make it vertically responsive to viewport height. I did another version without using this. Then it works fine on iPad.

Another situation is that after I drag a card in a kanban column to another kanban column, it was copied over properly. However, for some reason, it won’t show the copied card immediately. I need to click something or drag the screen for it to “refresh”. Then the card shows up. I was using my board for a while for testing. It only started having those situations recently. Again, this non-refreshing doesn’t happen all the time. It only happens sometimes.

I have switched back to the old responsive way for now. But still the page not being able to refresh immediately sometimes is a problem.

Thanks for your help and hope to get a response or suggestion from you soon.

Regards,

Grady

Hello Grady,
10 px to 320 px: Have you tried with the conditional: When my drop area XYZ is not empty.
Or (that solution works on my side):
DropArea: Min width 10 px, Max width 320 px, fit width content.
Drag&drop group 300 px
Ipad issue: I have no clue
Refresh: I have no clue too.
I hope it helps but I am a very basic user
Cheers,
Elena