Sortable List
Drag-and-drop reorderable list and kanban board using the native HTML Drag and Drop API with Stimulus. No external dependencies required. Supports drag handles, visual drop indicators, and cross-list dragging for kanban columns.
List
Vertical reorderable list with drag handles and slide animation.
_sortable_list.html.erb
███
████████ ████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████ ██████ █
█ ███ ████ ██████ ██████ ██████ ████████████ █████████ ████████████ ██
█ ███ ████ ██████ ███████ █████ ██
█ ███ ████ ██████ ██████ ██████ ████████████ ████████ ████████████ █
█ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_list_component.html.erb
████
██████████ █████████████████ ███
███████████████████████████████
████████████████████████████████████ ██████ ███
██ ██ █████ █████████████████████████████████████ █████ █████ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
████
███████████ ████████████ █████ ████ ████ ████████ █████████████████ █████████████████ █████████████
████████████████
sortable_list_list_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████████ ███████ ███████████████
███ ██████████████████ █████ ██████ ████ ████████████████
███████ █ ██████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Kanban
Multi-column board with drag between and within columns.
_sortable_list.html.erb
███
████████ ████ █████████ █ ██████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ████████ █
█
███ ███████
██████ ███ ████
██████ █
█ ███ ████ ██████ ███████ █████████ ████████████ ███████ ███████ ███████████ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_kanban_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ ███████████████████ ███ ███████████████ ████ ████████████████
████████ █ ███████
███████████████ █ ██████████████
██████████████ █ █████████████████████ ██ ██
███
███ █████████████
sortable_list_kanban_component.html.erb
████
██████████ █████████████ ███
███████████████████████████████
███████████████████████████████████████
█
██ ████████████ ██ ████████ ██
████
████████████████████ ████ ███████████ ████████████████████ ██████████ ██████ ████████████████ ██████████████████████
███████████
███████████████████ ███████████ ███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Changelog
- v1.0.0: Initial release with list and kanban styles
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now