New Responsive [beta] Drag and Drop in Elements Tree

Announcements New features
1

Hi everyone! We’ve added functionality to the elements tree for the New Responsive beta, allowing you to drag and drop to reorder and re-parent elements. Here are some notes to keep in mind when using this new feature:

  • Clicking and holding an element will allow you to drag, and a line will appear to indicate where you will be dropping your element.
  • A group will highlight when you hover over it or its children to indicate that you are dropping within that group
  • If you hover over a collapsed group for more than one second, it will expand automatically
  • Elements can be re-ordered within a parent container
    • Reordering within a Fixed or Align to Parent will change z-index (Fixed and Align to Parent containers sort their children by ascending z-index)
    • Reordering within a Row or Column will change the order of an element (Row and Column containers sort their children by ascending order)
  • Elements can be moved from one parent container to another
    • Into Fixed: the element that is dropped in will respect z-index and default to top left position
    • Into Align to Parent: will respect z index and default to top left position
    • Into Row: respect order
    • Into Column: respect order
    • If you drag into a collapsed group, the element will default to be the last child in the list
  • Draggable elements include containers nested within a parent container
  • We have disabled drag and drop for popups, group foci, and floating groups, as they rest above the page and cannot be nested into other groups. You can, however, drag other elements into these containers
  • You may not drag a group into itself
  • For now, you may only drag one element at a time, but the ability to select multiple is planned for the future :slight_smile:

Happy dragging and dropping!

New Responsive | Drag & Drop in Elements Tree - Watch Video

56 Likes
2

Huge!

1 Like
3

:smiley:
:+1:
:+1:
:+1:

4

WoW :clap: ! It was worth the wait :grinning:

5

I’m really loving this new rhythm of new drops that Bubble has had in recent weeks. You guys are killing it! Thank you!

3 Likes
6

Fan level +++++

1 Like
7

Thanks! Will be using this right away. :blush:

8

This is great news and works just as expected - you are on a roll!! :star_struck: :star_struck:

9

amazing

10

Woah! This is a game changer.

11

Thank you, thank you, thank you. :raised_hands: :raised_hands: :raised_hands: :raised_hands: The amount of time I’ve fiddled and faffed to re-order popups …

12

Awesome :clinking_glasses:

13

Amazing! Thanks!

14

Thank you :raised_hands:

15

Awesome! Super useful, thanks!

16

Amazing feature!

@kathleen I’m able to use it in new pages but not in pages that were upgraded to the new responsive engine before today. Is this the expected behaviour?

17

That is awesome, This makes development faster.

18

You should be able to use drag and drop in the elements tree on any upgraded pages, regardless of when you upgraded. If this is happening to you consistently, please do file a bug report :slight_smile:

3 Likes
19

That’s what I thought! Thanks for confirming. Just submitted a bug report.

20

Wow this is massive - A big step forward for the element tree. Just played around with it for a bit - Works exactly as I would expect it @kathleen Great work!

1 Like