[New template] Drag and Drop Kanban

Hi everyone!

I have created a new building block that consists of a fully functional, mobile responsive drag and drop kanban board. TIP: If you are copying this into your app make sure to first replicate the database structure (Block and Task). You also need to install the ‘Draggable Elements’ plugin (FREE).

Demo: https://draganddropblocks.bubbleapps.io
Template page: Drag and Drop Kanban Template | Bubble

5 Likes

Any way to make the cards be repeated horizontally rather than vertically in mobile view?

1 Like

horizontal doesn’t work well on Mobile. It’s possible though. Not really a pleasant sight :smiley:

1 Like

Hi @sharma.himanshu0608

You can change the repeating group that is used to show the blocks to ‘horizontal scrolling’. Is that the behaviour you are looking for? I don’t know if repeating the blocks horizontally on mobile creates the best UX though.

EDIT: Fully agree with @nocodeventure :wink:

I noticed you are using Data searches to re-order the tasks. I think you should target the list data without doing a search. Much faster to work with.

1 Like

Yes I wanted to use states, but this is often confusing for starters.

I have now updated the app to use states and it greatly improved the speed.

1 Like

You can also target the current list that it’s dropped on without states. Although with states, it’s a much cleaner way.

Good one Thimo :wink:

2 Likes

Hi Thimo-
Is there any way in this template that an entire column can be dragged and dropped in order to re-arrange the horizontal order of columns?
Thanks
Sam

@sam14 This is not implemented inside the template right now, but it can of course be implemented by you. This will require some effort though. You will have to replace all those groups with dragable groups and dropzones. There will also be some new workflows needed. You could always look at the already implemented drag and drop feature as an example :slight_smile:

Is it possible to drag and drop the cards into an empty space?

At this moment, you can only drop the cards on places you can see when viewing the template. So on another card or below it. Not on an empty space. This could ofcourse be implemented by you though :slight_smile:

Hey @Thimo - fantastic template, looking forward to building on it.

I just purchased it, replicated the DB structure, installed the drag/drop plugin, and I copied in your entire index page (renaming it to “dashboard” in mine). Doing this led to a bunch of broken links (see attached) - is this normal?

Update
I just did the manual relinking - took about 15mins. Really great template - thanks!

Cheers
Rob