# \[New template\] Drag and Drop Kanban

**URL:** <https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551>\
**Category:** Showcase\
**Created:** [June 5, 2020, 8:58am UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551 "2020-06-05T08:58:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 5, 2020, 8:58am UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/1 "2020-06-05T08:58:45Z")

</div>

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](https://draganddropblocks.bubbleapps.io)  
**Template page:** [Drag and Drop Kanban Template | Bubble](https://bubble.io/template/drag-and-drop-kanban-1590957705927x561070489327894500)

 ![2020-05-31 om 22.22.49](https://us1.discourse-cdn.com/bubble/original/3X/9/2/9249bacdf190cdb3e663b800c803ffb1ea3b6f0b.png)

---

<div class="post-metadata">

**Author:** ![sharma.himanshu0608](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sharma.himanshu0608/32/81321_2.png) [@sharma.himanshu0608](https://forum.bubble.io/u/sharma.himanshu0608)\
**Post date:** [June 5, 2020, 12:49pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/2 "2020-06-05T12:49:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [June 5, 2020, 1:00pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/3 "2020-06-05T13:00:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 5, 2020, 1:01pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/4 "2020-06-05T13:01:50Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [June 5, 2020, 1:06pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/5 "2020-06-05T13:06:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [June 5, 2020, 1:41pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/6 "2020-06-05T13:41:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nocodeventure](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/nocodeventure/32/247164_2.png) [@nocodeventure](https://forum.bubble.io/u/nocodeventure)\
**Post date:** [June 5, 2020, 1:42pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/7 "2020-06-05T13:42:31Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![sam14](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sam14/32/101888_2.png) [@sam14](https://forum.bubble.io/u/sam14)\
**Post date:** [December 4, 2020, 6:39pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/8 "2020-12-04T18:39:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [December 4, 2020, 6:49pm UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/9 "2020-12-04T18:49:58Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![jpeangeles](https://avatars.discourse-cdn.com/v4/letter/j/f0a364/32.png) [@jpeangeles](https://forum.bubble.io/u/jpeangeles)\
**Post date:** [March 4, 2021, 6:32am UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/10 "2021-03-04T06:32:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Thimo](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thimo/32/208917_2.png) [@Thimo](https://forum.bubble.io/u/Thimo)\
**Post date:** [March 4, 2021, 8:13am UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/11 "2021-03-04T08:13:23Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![robhblake](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/robhblake/32/60625_2.png) [@robhblake](https://forum.bubble.io/u/robhblake)\
**Post date:** [July 8, 2021, 7:18am UTC](https://forum.bubble.io/t/new-template-drag-and-drop-kanban/95551/12 "2021-07-08T07:18:51Z")

</div>

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!

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/3/9/39a0c6b2c325aa230e199f6bdd2c041bb68135ee.png)

Cheers  
Rob
