Building the Kanban Board

After deciding to add Kanban, building it on mobile turned out to be the hard part. On desktop, you grab a card with the mouse and drag it. Simple. On mobile, you have one finger. That one finger has to lift the card, move it, and somehow still let you look around the screen.

Short Press vs. Long Press

The first decision — touching a card doesn’t lift it immediately. You have to hold for a moment first. Otherwise, every time you swipe a column of cards to scroll, a card gets caught. Short press opens the card. Long press lifts it. It seems like a tiny detail, but if you don’t sort it out first, everything else feels wrong.

Leave the Original, Float a Copy

When the card is lifted, I don’t actually move the card itself. The original stays in place (just hidden from view), and a separate copy gets floated to the top of the screen, following the finger.

The reason is simple. The original is tied to its column — it scrolls with the other cards. To make it follow the finger, you’d have to break all those relationships, and the column flickers in the process. Far cleaner to float a copy.

Push Past the Edge and the Columns Come

If you cram three columns into a narrow phone screen, card titles get clipped at two characters. So I made each column wider, and the columns that don’t fit are pushed off to the side. You scroll horizontally to see them.

Which introduces a problem: you want to drop the card in a column that’s currently off-screen. But your finger has to stay on the screen.

The fix — when your finger gets close to either edge, the columns start sliding toward you. Closer to the edge, faster. Just hold your finger there and the column you want will eventually come into view.

Getting this to feel intuitive took some tuning. Too slow and it’s annoying. Too fast and you can’t stop where you mean to. The trick was treating finger position like acceleration — slow when far from the edge, faster as you get closer.

Lifted, Snapped Back, Then Moved

First test, I found a weird bug. Drop a card on a different column, and it would briefly snap back to its original spot before sliding into the new column. Maybe 0.3 seconds. Short, but annoying.

Tracing it down — saving the new state was fast, but the screen needed a moment to actually pick up that change. In that tiny window, the floating copy had already disappeared, and the original was still showing in its old spot.

The fix was simple. Keep the original hidden for a little longer, even after the floating copy is gone. Wait for the screen to absorb the new state. From the user’s side, the card just moves smoothly to its new home.

Skipped the Harder Path

At first I was going to use a “virtual list” — a thing where cards off-screen aren’t drawn, so it stays fast even with lots of cards. But if you use that, the moment a card you’re dragging scrolls off-screen, it just disappears. The drag ends with it.

There are ways around this, but they all add complexity. So I made a different choice. Cap how many cards each column shows. Twenty. A kanban is meant for things you’re working on right now, not for laying out every task you’ve ever had. If a column has more than twenty cards, that’s already a signal that something else is going wrong.

Finally

Kanban looks simple from the outside. You drag cards around. But once it’s built and you look back at it, there are surprisingly many decisions in that little motion. When to lift it. How to float it. How to know when you’re near an edge. How to land it smoothly after the drop.

Once everything works, the code looks unremarkable. But behind it sit a lot of invisible decisions. That’s usually how it goes.