michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Band Lineup 1.12.0: dragging photos into spots works with a finger and stops dropping out

Browse Source 
The editor used the browser's built-in drag-and-drop, which never fires for
a touchscreen, flickered its drop highlight over a card's inner parts, and
lost the drag whenever a board update arrived mid-drag (the editor was
rebuilt under the pointer).

Dragging is now driven by pointer events, one path for mouse and touch: a
mouse drags as soon as it moves, a finger holds still for a moment first so
a swipe still scrolls. A floating copy of the photo follows the pointer, the
spot under it lights up, the editor auto-scrolls near its edges, and board
updates wait until the drop. Tap a photo then tap a spot still works.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
christian
2026-10-20 13:06:57 -04:00
co-authored by Claude Opus 5.5
parent e670e1ee72
commit a692b6a9e2
3 changed files with 129 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/band-lineup/style.css
+17
View File
@@ -230,3 +230,20 @@
background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--text); cursor: pointer; font-size: 0.85em; line-height: 1;
}
[data-module="band-lineup"] .bl-lib-del:hover { background: var(--danger); color: #fff; }
/* Drag: the floating photo that follows the pointer (appended to <body>, so it scopes itself). */
[data-module="band-lineup"].bl-drag-ghost {
position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
width: 72px; aspect-ratio: 3 / 4; margin: -48px 0 0 -36px; border-radius: 8px; overflow: hidden;
border: 2px solid var(--accent); background: var(--panel, #222); color: var(--text); font-size: 11px;
display: flex; align-items: center; justify-content: center; text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); opacity: 0.92;
}
[data-module="band-lineup"].bl-drag-ghost img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
[data-module="band-lineup"] .bl-lib-item,
[data-module="band-lineup"] .bl-edit-slot { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
[data-module="band-lineup"] .bl-edit-slot img,
[data-module="band-lineup"] .bl-lib-item img { -webkit-user-drag: none; pointer-events: none; }
[data-module="band-lineup"] .bl-dragging { opacity: 0.35; }
[data-module="band-lineup"].bl-is-dragging, [data-module="band-lineup"] .bl-is-dragging { cursor: grabbing; }
[data-module="band-lineup"] .bl-is-dragging .bl-edit-slot { transition: box-shadow 0.08s; }