A Little Drag and Drop Fun

Up until very recently, I hadn’t ever tried to use the draggable elements plugin in Bubble. I had a play with it for the first time the other day, as a proof of concept for a part of something I may need to build soon. The forum app page that was put up to showcase the plugin when it was launched appears to be broken, so I thought I’d share my simple example, in case it helps anyone, or just for fun :slight_smile:

Preview: https://louisforum.bubbleapps.io/version-test/dinosaurs

Editor: https://bubble.io/page?type=page&name=dinosaurs&id=louisforum&tab=tabs-1

I’m sure there are endless possibilities with this feature and I’m looking for inspiration. What fun/useful things have you done with drag and drop in Bubble?

23 Likes

:sauropod:tastic.

5 Likes

The 6 year old version of myself judged me as I was guessing answers. :smiley:

Making a Kanban board is pretty easy to do with drag drop. Or an app with stickey notes.

6 Likes

Hi @dan1,

There is one issue that I have encountered with drag and drop. I’m hoping that you found a way around it for your Kanban board, assuming it applies there of course.

The issue is that when dragging a drag/drop group that is within a RG, the properties of the drag/drop group are not available for use, e.g. in Conditionals and workflow ‘Only when’ statements. This prevents me from checking for example if what I’m dragging matches what I’m dropping it on. If in my example above, I displayed multiple images in a RG and the names in another RG, I would experience this issue.

This is of course, a ‘feature’ of items in RGs in general - that their properties cannot be accessed from outside the RG, but it is particularly limiting in this instance.

I’m curious as to whether or not you’ve found this also and more importantly if you found a way past it.

The only hack I could come of with, almost works but not quite. I put a text box within the drag/drop group and use it’s clicked event to set a custom state on the RG. The problem with this however, is that due to what I think is a bug, it takes two attempts for an item to be matched when it is correct. The bug, if it is indeed a bug, is that a clicked event is not registered until after you let go following the click. So if you click and drag, the drop event registers before the click. This is demonstrated here: https://louisforum.bubbleapps.io/version-test/dinosaurs_rg

If you have any pointers please let me know. Thanks. This is also open to others to chime in, of course.

Think I follow what you’re saying. (Built it a while back, so going from memory). My Kanban board is driven using database logic of two different types of things: Categories and Cards.

From a setup standpoint, I have a repeating group (horizontal) inside of a repeating group (vertical scrolling). The first group is the Kanban category (ex. Up Next, In Progress, Done). The nested repeating group is of Cards. For each card, it has a current Kanban category and that is used for filtering. Each card is a draggable group. Each category of the repeating group also contains a drop area as a container.

These categories have attributes associated with them (ie. a card cannot be moved from In Progress to Done if there are pending tasks associated with the card. Otherwise, a popup appears that says “Archive Pending Tasks”).

In your case, you could have two identical repeating groups, where one is a pictorial representation, the other is a text representation. So, when drag group’s unique ID is drop area’s unique ID, you have a match. (And at that point, put a conditional state on the drop area Box that displays the pictorial and text).

Thanks for your response @dan1

This is where I’m seeing an issue. As these are separate RGs, even if they’re identical, I don’t see how to reference the drag/drop group’s content or unique id from outiside the RG that contains it. They aren’t available. Unless I’ve misunderstood you - or perhaps your earlier statement is key, i.e. that your RGs are nested. I haven’t tried this. Perhaps this would allow access to the drag/drop groups’ properties …

Ah, yes, you just helped me realize part of the problem. In your example, it needs to go into an exact order. (Kanban is just adding to a list, which is why my approach doesn’t encounter the issue for what you describe).

The better way may be to have the first set of things (the draggable items) be a repeating group. Then, have a fixed number of drop areas. (Where the data for each drop area is a random item from the repeating group; you could build out some fancier approaches for randomness to ensure nothing is repeated).

Video and screenshot of the workflows below…

My Page.webm - Google Drive

1 Like

Thanks, @dan1, this looks like a promising idea. I’ll give it a try later.

1 Like

@louisadekoya you mentioned …

I also played about with darg and drop a few days ago and managed to get slide to reveal delete button working in an RG. The slide to left to show button and to right to hide it again worked beautifully. See my video at iOS Style List/RG Drag to Delete [WORKING ... ALMOST]

Where I hit trouble was that I can’t distinguish between when a user is tapping to open or touching to drag so I reluctantly had to abandon the concept. If you ever solve that problem I’d love to hear about it.

1 Like

Hi @dan1,

Thanks again for the idea. I was able to implement it without having to resort to fixed drop areas, in other words, with two repeating groups. I hadn’t realised that a workflow thing instance is set implicitly when dragging an item, which is why this approach works I think. Typically, at least in my experience, you need to specifically set a workflow thing instance when calling a workflow that requires a workflow thing, but in the case of a drop area, it appears that this is not necessary.

A working example is here, for anyone interested.

One slight frustration is that if you set two RGs having the same data source to each be sorted randomly, they are both sorted in exactly the same random order as each other. I guess Bubble does this for efficiency, but I wish there was a way to force them to be independently randomly sorted. As it is, I’ve had to sort one randomly and the other alphabetically.

@patricia, nice work on the iOS-style slide to delete. I would have thought the click and drag events would be fairly distinct and distinguishable, but I guess it can get fiddly on touch screens.

4 Likes

Hey, this is cools stuff. I was not aware there was a DnD plugin. Is it possible to display a “drop hint” - e.g. change the appearance of the drop zone when an element is dragged over it to indicate it will “accept” the item being dragged?

Just answered my own question. It seems you can set a condition to alter the appearance of the drop area on “drag over”. Nice. I’ll have to play with this some more.

1 Like

very nice! is there a tutorial I could follow in order to reproduce it?

No tutorial I’m afraid, but the page linked to in my last post above does include a link to the editor so you can see what I did. It’s been a while since I did it but looking at it again briefly, I can see the following:

  1. Two repeating groups (RGs) of dinosaurs - one showing just the images and the other the names; one with a drag/drop group and the other with a drop area; one sorted randomly and the other by name. The names and images are of course stored in the database.
  2. I then have a couple of workflows - one to set a custom-state to matched if you drag an image from the images RG to the matching cell in the names RG. The matching is done by checking the “current workflow dinosaur” against the current cell of the names RG. The use of the current workflow thing here was the key as I recall. It is a concept normally reserved for custom workflows but it seems that workflows for drag/drop areas are special in that way too. The other workflow animates some text when the two don’t match.

I hope this helps.

1 Like

@john.giftakis you can check out this editor for chat messenger how I put together drag and drop to enable side swipe function

Or this editor to see how to set up a re-order ( very complicated )…go to the page…press button add tour…go to left side and press add itinerary button…then add items…after you add a few items start to drag and drop to re-order

It took a lot of effort to get the time of the event to work correctly and not sure if this version it is, but the re-order ( shuffle sort order ) is working fine.

@boston85719 hi thanks fo the feedback. I would like to make something like this:

A filter page where at the bottom of the page you can see a List of existing items and a Drop area where you can either drag n drop them or press the arrow to insert them there. Reorder also.

Any rough guidelines?

Br

Yes

@john.giftakis you can check out this editor for chat messenger how I put together drag and drop to enable side swipe function

Bubble

Bubble Editor - Basicelements

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Or this editor to see how to set up a re-order ( very complicated )…go to the page…press button add tour…go to left side and press add itinerary button…then add items…after you add a few items start to drag and drop to re-order

Bubble

Bubble Editor - Smart-travels-main

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

****it’s a complicated topic so I’d approach it with an expectation of taking a few hours to pick apart how it works and try to re-build it in your own app…Pay attention to custom states and conditionals and the connections to the database…also double check all workflows

Hi @louisadekoya I really liked your drag and drop approach with the dinosaurs_rg. I tried to duplicate it but couldn’t solve the issue of dragging items twice for the drop area to recognise the match. From your example I can see you figured it out, but I have two problems:

  1. I am unable to reset data for the repeating group with dinosaurs images in the same workflow within the Drop Area RG.
  2. When I drag a card (text dummy is clicked), the state (my dragged dino) is only set when I release the click, but then the workflow to check the DropArea and answer already ran empty, because the dragged dino has not been set yet.
    So I see that you example works fine, so I wonder what I am missing. Thanks already for the great example!

Thanks. It’s been quite some time since I did this and consequently, I think, I’m struggling somewhat to understand the issues you’re describing. I thought I should check anyway if you’ve looked at my second example - a better one than in the original post. I mentioned it here …

It includes a button linking to the editor and you should be able to see everything that I did to make it work. If you still can’t figure it out, let me know and we can take a closer look, perhaps with you sharing your own version.

1 Like

Thank you so much for the fast response. I am always impressed by how active and helpful the community is. Good new first, I managed to finally get my drag and drop to work. I assume though, that Bubble made some upgrades, because I wasn’t able to 100% replicate your workflows, but instead I was able to use the “current workflow” to match a word on the first drag.


This means I didn’t have to set the interim state to hold the dragged card.

Finding the Current Workflow option, combined with your logic made it work in the end :slight_smile: Thanks again!

1 Like