collin/anvil · c2c846d8
fix: make board drag actually start on touch
Collin Richards · 2026-06-10 18:03 UTC · c2c846d80972ec7cbe7fe1a7b9a82ae2d1d734b6 · parent 06f1be4a · browse files
modifiedcrates/anvil-web/src/todomd.rs+3 −1
| ⋯ 675 unchanged lines | |||
| 676 | 676 | var board = document.querySelector('.kanban[data-move-url]'); | |
| 677 | 677 | if (!board) return; | |
| 678 | 678 | var url = board.dataset.moveUrl, tip = board.dataset.tip, csrf = board.dataset.csrf; | |
| 679 | - | var card = null, fromSection = null, grip = null, pid = null; | |
| 679 | + | var card = null, fromSection = null, grip = null, pid = null, moved = false; | |
| 680 | 680 | ||
| 681 | 681 | function afterCard(col, y){ | |
| 682 | 682 | var cards = [].slice.call(col.querySelectorAll('.card:not(.dragging)')); | |
| ⋯ 8 unchanged lines | |||
| 691 | 691 | function onMove(e){ | |
| 692 | 692 | if (!card) return; | |
| 693 | 693 | e.preventDefault(); | |
| 694 | + | moved = true; | |
| 694 | 695 | var under = document.elementFromPoint(e.clientX, e.clientY); | |
| 695 | 696 | var col = (under && under.closest && under.closest('.col')) || card.closest('.col'); | |
| 696 | 697 | var after = afterCard(col, e.clientY); | |
| ⋯ 8 unchanged lines | |||
| 705 | 706 | var c = card; | |
| 706 | 707 | card = null; | |
| 707 | 708 | c.classList.remove('dragging'); | |
| 709 | + | if (!moved) return; // a tap or cancelled gesture — nothing to commit | |
| 708 | 710 | var col = c.closest('.col'); | |
| 709 | 711 | var cards = [].slice.call(col.querySelectorAll('.card')); | |
| 710 | 712 | var body = new URLSearchParams(); | |
| ⋯ 293 unchanged lines | |||
modifiedcrates/anvil-web/src/ui.rs+5 −2
| ⋯ 199 unchanged lines | |||
| 200 | 200 | .kanban .card:hover .card-del-btn, .card-del-btn:focus { opacity:1; } | |
| 201 | 201 | .kanban .card-del-btn:hover { color:#cf222e; background:var(--code-bg); } | |
| 202 | 202 | .kanban .card .title { padding-right:14px; } | |
| 203 | - | .kanban .card:has(.card-grip) { padding-left:26px; } | |
| 204 | - | .kanban .card-grip { position:absolute; left:3px; top:7px; color:var(--muted); cursor:grab; touch-action:none; line-height:0; padding:2px; border-radius:4px; } | |
| 203 | + | .kanban .card:has(.card-grip) { padding-left:28px; } | |
| 204 | + | .kanban .card-grip { position:absolute; left:2px; top:5px; color:var(--muted); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; line-height:0; padding:4px 5px; border-radius:4px; } | |
| 205 | + | /* The touch must land on the grip (touch-action:none), not the icon inside it, | |
| 206 | + | or the browser claims the gesture for scrolling and never drags. */ | |
| 207 | + | .kanban .card-grip svg { pointer-events:none; } | |
| 205 | 208 | .kanban .card-grip:hover { color:var(--fg); background:var(--code-bg); } | |
| 206 | 209 | .kanban .card.dragging { opacity:.4; pointer-events:none; } | |
| 207 | 210 | .kanban .card.dragging .card-grip { pointer-events:auto; cursor:grabbing; } | |
| ⋯ 2479 unchanged lines | |||