Drag-and-drop reordering for link cards #9

New issue

Closed

opened 2026-05-25 11:25:51 +00:00 by ldraney · 0 comments

ldraney commented

2026-05-25 11:25:51 +00:00

Owner

Type

Feature

Lineage

Standalone -- user request during initial palinks development.

Repo

ldraney/palinks

User Story

As a user
I want to drag link cards into my preferred order
So that I can organize links by priority rather than just by date

Context

Links currently sort by updated_at desc. Users need manual control over card ordering. This requires a position column, a sort endpoint, and a client-side drag controller that works on both desktop (HTML5 DnD) and mobile (touch events). The JS pipeline (importmap + Stimulus) was not yet set up in this project.

File Targets

Files modified or created:

db/migrate/*_add_position_to_links.rb -- add position integer column
app/models/link.rb -- update ordered scope to use position
app/controllers/links_controller.rb -- add sort action
config/routes.rb -- add sort collection route
config/importmap.rb -- new, pins for Turbo/Stimulus
app/javascript/application.js -- new, JS entrypoint
app/javascript/controllers/ -- new, Stimulus bootstrap + sortable controller
app/views/links/index.html.erb -- add sortable data-controller
app/views/links/_link.html.erb -- add drag handle and data-target
app/assets/stylesheets/application.css -- drag states, handle, compact cards
app/views/layouts/application.html.erb -- add javascript_importmap_tags
config/environments/development.rb -- allow dev tunnel host
docker-compose.yml -- remap to port 9998

Acceptance Criteria

When I drag a card on desktop, it reorders and persists across reload
When I touch-drag via the handle on mobile, it reorders without blocking page scroll
When I drag near viewport edges on mobile, the page auto-scrolls

Test Expectations

Manual: drag cards on desktop, reload, verify order persists
Manual: touch-drag handle on mobile, verify reorder and scroll behavior
Run: bin/rails db:migrate confirms position column added

Constraints

No external JS libraries -- native HTML5 DnD + touch events only
Follow ror-css-guide conventions (.is-* state classes, component comments with Stimulus refs)
Stimulus controller via importmap-rails, no Node/npm

Checklist

PR opened
Tests pass
No unrelated changes

palinks -- project this affects

### Type Feature ### Lineage Standalone -- user request during initial palinks development. ### Repo `ldraney/palinks` ### User Story As a user I want to drag link cards into my preferred order So that I can organize links by priority rather than just by date ### Context Links currently sort by updated_at desc. Users need manual control over card ordering. This requires a position column, a sort endpoint, and a client-side drag controller that works on both desktop (HTML5 DnD) and mobile (touch events). The JS pipeline (importmap + Stimulus) was not yet set up in this project. ### File Targets Files modified or created: - `db/migrate/*_add_position_to_links.rb` -- add position integer column - `app/models/link.rb` -- update ordered scope to use position - `app/controllers/links_controller.rb` -- add sort action - `config/routes.rb` -- add sort collection route - `config/importmap.rb` -- new, pins for Turbo/Stimulus - `app/javascript/application.js` -- new, JS entrypoint - `app/javascript/controllers/` -- new, Stimulus bootstrap + sortable controller - `app/views/links/index.html.erb` -- add sortable data-controller - `app/views/links/_link.html.erb` -- add drag handle and data-target - `app/assets/stylesheets/application.css` -- drag states, handle, compact cards - `app/views/layouts/application.html.erb` -- add javascript_importmap_tags - `config/environments/development.rb` -- allow dev tunnel host - `docker-compose.yml` -- remap to port 9998 ### Acceptance Criteria - [ ] When I drag a card on desktop, it reorders and persists across reload - [ ] When I touch-drag via the handle on mobile, it reorders without blocking page scroll - [ ] When I drag near viewport edges on mobile, the page auto-scrolls ### Test Expectations - [ ] Manual: drag cards on desktop, reload, verify order persists - [ ] Manual: touch-drag handle on mobile, verify reorder and scroll behavior - Run: `bin/rails db:migrate` confirms position column added ### Constraints - No external JS libraries -- native HTML5 DnD + touch events only - Follow ror-css-guide conventions (`.is-*` state classes, component comments with Stimulus refs) - Stimulus controller via importmap-rails, no Node/npm ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `palinks` -- project this affects