agw/Weircon-wind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

weirsoe-ui.js: reusable sortable (desktop DnD + clean drag image + mobile touch) and copy-link

Browse Source 
Generic drag-and-drop sortable list + copy-to-clipboard, extracted from the wish
app so any consumer can reuse it. [data-wt-sortable] + data-order-url on a
container; [data-item-id] children; .drag-handle affordance. Desktop uses native
DnD with a solid drag image (no smeared translucent ghost); mobile uses
long-press to lift + drag-reorder + edge auto-scroll. Plus .drag-handle/.wt-dragging CSS.
This commit is contained in:
Asger Geel Weirsøe
2026-06-14 18:10:00 +02:00
parent e14632026d
commit a04a3c0970
3 changed files with 190 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
weirsoe-theme.css
+11
View File
@@ -161,6 +161,17 @@ body::before {
.wt-card--link:hover .wt-card-title, a.wt-card--hover:hover .wt-card-title { color: var(--color-accent); }
.wt-card-desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted); }
/* Drag-and-drop sortable lists (paired with weirsoe-ui.js). Mark the container
with [data-wt-sortable] + data-order-url; children need [data-item-id]; add a
.drag-handle as the grab affordance. */
.drag-handle {
cursor: grab; color: var(--color-muted);
margin-right: 0.4rem; font-size: 1.2rem; line-height: 1; user-select: none;
}
.drag-handle:active { cursor: grabbing; }
[data-wt-sortable] > [data-item-id] { cursor: default; }
.wt-dragging { opacity: 0.45; }
/* Pill chip / tag-link (e.g. blog tags) */
.wt-chip {
display: inline-flex; align-items: center; border-radius: 999px;