On this page
01What it becomes
A React component that ships with your app: drag/drop groups and drop areas. Drag/drop groups and drop areas become components that keep their children and data. Dropping a group runs your “has a group dropped on it” workflow with the dropped item, like in Bubble.
No extra npm package: the generated code uses React, Next.js and browser APIs only.
02What converts
- Drag/drop group (with group data, constraints, move-back or hide after drop)
- Drop area with its “dropped on” event and “is dragged over” styling
- Dragging states
03Not converted yet
- The “Move element” action.
Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.
04About this plugin
Draggable Elements is made by Bubble itself (visual elements + action). See its page in the Bubble manual.
Questions
- Does the Draggable Elements plugin work outside Bubble?
- Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — A React component that ships with your app: drag/drop groups and drop areas.
- Will my Draggable Elements settings carry over?
- Mostly. deBub converts 3 of the plugin’s 4 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.