[New Feature] Draggable/droppable elements

What’s the point of using the drag and drop if the item I’m dragging disappears post-drop?

How can you get around this?

I have not used the function yet but in looking earlier there is an option to move back instead of hide group. Not sure if this helps…

It’s weird, but to obtain the behavior you are looking for (drag, drop and stay), you will hide the dragged element when dropped while showing a new element in the new position.

Ie. if you drag between two repeating groups, when you drop you should add the dropped element to the new repeating, therefore making it appear as dropped in the new list.

1 Like

Hey, has anyone figured out how to save the exact location of a dropped element when the page is refreshed?

Hi, I am trying to get the coordinates X, Y of the draggable group, but it is not available any longer. Is there a parameter that needs to be set to make it accessible?

Thanks

This doesn’t work for me, not sure why.

Does anyone know of a way to get a droppable area to not be fixed width? It’s throwing off my responsive design.

1 Like

Hi! Great feature! Is there a way that I can drag the group using an icon rather than clicking anywhere on the group? I dont want users to be able to drag from every part of the group shown below. The drag should only work if I click on the 3 bars on the right.

Hey Skinnydow!

I was wondering if you had found a solution for this? I’m also running into the same issue with it not looking as “pretty” as I’d like.

Hey draked123,
Unfortunately droppable areas are always fixed with. I just ended up having to create a design where the droppable area could stay fixed with and everything else around it resizes.

Just a feature request for the “Move drag/drop group” to have offset top and left to have a % input as well on top of the px currently offered.

Would be very useful for when the draggable elment has dynamic dimensions and you want to center it.

1 Like

Amazing, very useful

Is there a way to trigger a workflow when the element is dragged and not on when it is dropped ?

Thankyou,
Shubham

2 Likes

I need this too for rearranging list items in a repeating group. When a list item is dropped, I need to change a state on it, but I can only access the list item belonging to the dropped area (the dropped item’s new location).

Overall this plugin could use some well-deserved updates, like dragging using a handle, rather than on the whole element, as others have mentioned above.

2 Likes

You can drag using a handle as opposed to the whole element:

  1. Add an icon or element for the handle in the draggable group.
  2. Check the box on the draggable group for “Disable the ability to drag”.
  3. Add a conditional: When Icon is hovered/pressed, uncheck the “Disable the ability to drag”.

That way, the entire group moves when it is dragged, but it is only draggable when the icon is hovered/pressed.

2 Likes

Thanks for your suggestion! That’s actually what I’m already doing – unfortunately this is a desktop-only solution.

On mobile there’s obviously no hover, and pressed is not triggered in time for the element to be draggable.

2 Likes

thanks a lot for your comment. I thought long and hard about finding this solution. You saved me.

This is something would help me too!

@tamas.somogyi Saw your reply before you deleted it and was curious to try out – did you run into issues with your approach?

Unfortunately yes:( Yesterday I had time to further investigate the solution and found that I’ve got false positiv test results due to some chaching I’ve made earlier. The click event actually didn’t happen when I dragged the item.
I deleted the comment as I didn’t want to mislead anyone.
Btw I tried to make the drag and drop work between two reusable but finally I decided to replace the drag and drop to a click and click solution for now. This works just fine but not that fancy. Waiting for Bubble to add the workflow trigger when I grab an item:)

Yeah it boggles my mind how there is still not a way to easily implement a simple list drag-n-drop solution for both desktop and mobile that updates a sorting index. I mean, they’re just about to release native mobile app support, how can you not have drag-n-drop?