Lista ordenable
Lista reordenable y tablero kanban con arrastrar y soltar usando la API nativa de Drag and Drop de HTML con Stimulus. No requiere dependencias externas. Soporta asas de arrastre, indicadores visuales de posición y arrastre entre listas para columnas kanban.
Lista
Lista vertical reordenable con asas de arrastre y animación de deslizamiento.
_sortable_list.html.erb
███
████████ ████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████ ██████ █
█ ███ ████ ██████ ██████ ██████ ████████████ █████████ ████████████ ██
█ ███ ████ ██████ ███████ █████ ██
█ ███ ████ ██████ ██████ ██████ ████████████ ████████ ████████████ █
█ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_list_component.html.erb
████
██████████ █████████████████ ███
███████████████████████████████
████████████████████████████████████ ██████ ███
██ ██ █████ █████████████████████████████████████ █████ █████ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
████
███████████ ████████████ █████ ████ ████ ████████ █████████████████ █████████████████ █████████████
████████████████
sortable_list_list_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████████ ███████ ███████████████
███ ██████████████████ █████ ██████ ████ ████████████████
███████ █ ██████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Kanban
Tablero multicolumna con arrastre entre y dentro de columnas.
_sortable_list.html.erb
███
████████ ████ █████████ █ ██████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ████████ █
█
███ ███████
██████ ███ ████
██████ █
█ ███ ████ ██████ ███████ █████████ ████████████ ███████ ███████ ███████████ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_kanban_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ ███████████████████ ███ ███████████████ ████ ████████████████
████████ █ ███████
███████████████ █ ██████████████
██████████████ █ █████████████████████ ██ ██
███
███ █████████████
sortable_list_kanban_component.html.erb
████
██████████ █████████████ ███
███████████████████████████████
███████████████████████████████████████
█
██ ████████████ ██ ████████ ██
████
████████████████████ ████ ███████████ ████████████████████ ██████████ ██████ ████████████████ ██████████████████████
███████████
███████████████████ ███████████ ███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Registro de Cambios
- v1.0.0: Initial release with list and kanban styles
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso