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?
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)
Sorry for the late reply. Please find the short video below for reference:
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.
Card on touch start:
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
Below is the workflow I have built inside the Kanban element.
On item moved workflow:
1 Like
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 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:
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/
email: 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.
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.
Thank you for your help and guidance. I was able to successfully implement the feature I wanted.
1 Like
Beautiful! Congrats Ayush 
1 Like