[New Feature] Draggable/droppable elements

Any help? Is it possible?

No this is not something we support yet.

thanks, I’ll think on a workaround for my specific situation

Is it possible in workflow to specify exactly which droppable group is dropped in dropzone?

So far I have workflow WHEN ‘Dropzone X has a group dropped on it’ and I am not able to specify which group, therefore I have 1 dropzone and 4 different droppable groups and it does not matter which group i drop - the result will be the same.

What I am missing is to create workflows
WHEN ‘Dropzone X has a group X dropped on it’ do Z
WHEN ‘Dropzone X has a group Y dropped on it’ do Q
etc.

jeez sometimes it’s just too simple and somehow I manage to miss it.
I just added and ‘and when draggable group X is dragged’ to the workflow and it worked.

2 Likes

This is great

So the forum app examples do not work anymore.

I was wondering if somebody managed to create a tinder-like function with this plugin? Which works just like the tinder plugin? Would that be possible (in terms of behavior, look and feel etc.).
The problem with the tinder function is that it has some limitations (only one text, the tinder pile has an ugly frame etc.)

EDIT: Just figured it out…very easy. If somebody needs help just send me a DM.

3 Likes

It would be pretty awesome if we were allowing users to drag and drop within a large drop zone, that the drop location could be saved for that element, and then it would appear there on refresh. I am moving things around a dropzone for visual organization, but when I refresh everything goes back to where it was. I imagine this would be a very simple upgrade but the implications would be huge. @emmanuel would this be a possibility?

4 Likes

This is a really good news and this allows me to keep a feature in my project that I was thinking to drop - I am creating an application where user would be able to design their own wedding invitation and I want them to be able to adjust positions of the texts (names, dates, etc…)

I see there are several people who ask for a possibility to save a draggable element position in one or another way. One of the solutions might be to give us a possibility to access offset left and offset top attributes of the Draggable element. These properties can be set in the action so why can’t we read them? I was actually planning to read these properties and save them to the database in order to display the elements in the same place when user comes back. Would probably be quite easy for you guys to add read access to these two properties?

The tricky thing with that though is that the offset is relative to an element. So in this case the only thing we can do is to get the offset relative to the top left corner of the page. Not sure it’d be very useful.

So you mean you don’t keep the information which element it was set relative to? Because if you have the absolute positions of those two, you can always find the offset.

Maybe it would be possible to get an offset relatively to the parent element?

What about giving us a possibility to get absolute position of any element?

What is the use case? Practically, what does saving the position bring in your case?

I am creating an webshop where people that are going to marry will be able to customize/personalize their wedding invitations. They will be able to enter their names and other texts, select fonts, colors and some other parameters. It would be really nice if they could adjust positions of these texts (names, dates, etc…).

We need to keep track of the text positions because:

  1. People will be able to save their personalized invitations and come back later to continue editing.
  2. People will be able to order printing of the invitations they’ve customized. For this we need to know where they have placed their texts.

In fact we are talking about a small postcard/wedding invitation editor here. It might sound too complex, but it looks like nothing is impossible for Bubble. Almost :slight_smile:

The best we could do would be to show the offset relatively to the main page element.

That would be the same as absolute position (or position relative to the top left corner), correct? Not sure if it will work for me, but might be still useful for other cases.

Ok, let’s approach this from a different angle:

I was thinking of creating icons for each direction: right, left, up, down and adjust the element (by calling the “Move Draggable Group” action) 1px relatively to the position that was previously saved in the DB. After the element is moved I will save it again. The problem here is that the “offset top and left” fields in the action only accept static values. I cannot use something like “move Input 1 to currentX+1”, only “move Input 1 to 123”.

Would it be possbile to allow dynamic values in the offset top and offset left fields?

It would also allow to initially position the elements based on the values from DB.

No we can’t really do this, that would make things very complex with the responsive engine.

Hmm… not sure if you really understood my point. You don’t need to adjust the position of the element when the page is resized. You just set offsets in pixels when the action is run. Only instead of setting a hard-coded value, you set a value from a database. It doesn’t need to deal with responsive engine at all.

And how would you populate these fields in the db?

There will initially be a value in the DB with elements offsets. When user will click “move right” button I will set a new “Offset left(px)” to “currentPosFromDB+10” and in the next action I will update the DB with currentPosFromDB+10

In this way the offset will be incremented by 10 each in both view and DB each time user clicks a move button. Of course one could save to an attribute instead of DB to speed things up.

Here I have created a small example. Since the offsets cannot be dynamic in action I had to create several events for button click (just for demo purposes):