# Setting weweb kanban element for mobile view

**URL:** <https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [February 6, 2026, 1:11pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759 "2026-02-06T13:11:31Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayushdev](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@ayushdev](https://community.weweb.io/u/ayushdev)\
**Post date:** [February 6, 2026, 1:11pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/1 "2026-02-06T13:11:32Z")

</div>

I am trying to build trello like feature for mobile view with kanban element ex. like long press and then we can drag the card but it not working as expected I used variables for conditions for draggable class but it is like first time touch get focus then touch do touch cancel then touch again now we can drag that card  
Anyone done this thing or have suggestions?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [February 6, 2026, 6:23pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/2 "2026-02-06T18:23:44Z")

</div>

Hi @ayushdev 👋

I’m not 100% sure I understand the UX you’re aiming for. Would you mind sharing a short video (or a few screenshots) walking us through the trello experience you want to replicate?

For example:

- On the **first touch/tap** of a card, what should happen? (open card, select/highlight, show actions, etc.)

- Do you want **tap** and **long-press** to do different things? (e.g., tap opens, long-press enables drag)

---

<div class="post-metadata">

**Author:** ![ayushdev](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@ayushdev](https://community.weweb.io/u/ayushdev)\
**Post date:** [February 10, 2026, 5:31am UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/3 "2026-02-10T05:31:44Z")

</div>

Sorry for the late reply. Please find the short video below for reference:

> **[New ツSupercut](https://supercut.ai/share/devayush/pvuoW3oANOgkqMQbjQphVf)**
>
> ツSupercut

As shown in the video, the **first tap only focuses the card** , and the **second tap starts the drag action**.  
I am using **custom drag** , and below is the condition I am using to add the `draggable` class.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fb0f516851b0482dbe742c1b872a67e7b922d08c.png)

Card on touch start:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/5711a8ef9576641f65efbac68fd9bf7e76609941.png)

This action is used on the following events:

- Card: **On touch end** and **On touch cancel**
- Kanban: **On scroll** , **On touch end** , and **On touch cancel**
- 

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1eda818c9f58f9da6a82ce6936a8751fd0d7a59d.png)

Below is the workflow I have built inside the **Kanban element**.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b1d067d352bd9363668ac022e7fdb372a95d1a11.jpeg)

**On item moved** workflow:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1e313dd08399cdb2677cc1c79cb0568d7738aea4.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [February 10, 2026, 10:45am UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/4 "2026-02-10T10:45:43Z")

</div>

Hey @ayushdev 👋

Thanks so much for putting this together, really appreciate it 🙂 I love the no-code approach you tried with the time delay. I think I’d have taken the same approach but my concern is that it might get a little buggy and become hard to maintain if you have different use cases on quick tap or long press.

Can you try forking[the Kanban element](https://github.com/weweb-assets/ww-kanban) and working with Claude Code or Cursor to have 2 separate triggers (e.g. `onCardTap` and `onCardLongPress`)?

We have a couple of videos on the topic of coded components that may help you with that:

- [https://youtu.be/s9HwpkSKONM](https://youtu.be/s9HwpkSKONM)
- [https://youtu.be/1A8wdH5Sb0o](https://youtu.be/1A8wdH5Sb0o)

---

<div class="post-metadata">

**Author:** ![ayushdev](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@ayushdev](https://community.weweb.io/u/ayushdev)\
**Post date:** [February 15, 2026, 11:13am UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/5 "2026-02-15T11:13:44Z")

</div>

Hello,

I forked the Kanban component and modified its code to implement the long-press item selection feature. That part is working correctly. However, I am now facing an issue with drag behavior on touch devices.

The item is start dragging, but it freezes in between while I am still holding and moving my finger on the screen. The drag does not behave as expected.

You can also check the published site on mobile using the link below:  
[https://9880bde9-9652-4ecd-9e3e-fb4e7b48cfdf.weweb-preview.io/](https://9880bde9-9652-4ecd-9e3e-fb4e7b48cfdf.weweb-preview.io/)

email: [ayush@gmail.com](mailto:ayush@gmail.com)  
password: 123456

I would really appreciate your suggestions so I can implement a proper fix. I have already spent a significant amount of time working on this, but the result is still not as expected.

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [February 15, 2026, 1:08pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/6 "2026-02-15T13:08:55Z")

</div>

It’s pretty difficult to diagnose the reason for such behavior in a modified component, since it is no longer a standard component but a changed one.

So the best (and I bet only) way to fix this is with AI.

---

<div class="post-metadata">

**Author:** ![ayushdev](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@ayushdev](https://community.weweb.io/u/ayushdev)\
**Post date:** [February 16, 2026, 3:45pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/7 "2026-02-16T15:45:48Z")

</div>

Thank you for your help and guidance. I was able to successfully implement the feature I wanted.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [February 16, 2026, 4:26pm UTC](https://community.weweb.io/t/setting-weweb-kanban-element-for-mobile-view/20759/8 "2026-02-16T16:26:59Z")

</div>

Beautiful! Congrats Ayush 😀🙌
