Sortierbare Liste
Drag-and-Drop-Umsortierungsliste und Kanban-Board mit der nativen HTML Drag-and-Drop-API und Stimulus. Keine externen Abhängigkeiten erforderlich. Unterstützt Ziehgriffe, visuelle Ablage-Indikatoren und listenübergreifendes Ziehen für Kanban-Spalten.
Liste
Vertikale umsortierbare Liste mit Ziehgriffen und Gleitanimation.
_sortable_list.html.erb
███
████████ ████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████ ██████ █
█ ███ ████ ██████ ██████ ██████ ████████████ █████████ ████████████ ██
█ ███ ████ ██████ ███████ █████ ██
█ ███ ████ ██████ ██████ ██████ ████████████ ████████ ████████████ █
█ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_list_component.html.erb
████
██████████ █████████████████ ███
███████████████████████████████
████████████████████████████████████ ██████ ███
██ ██ █████ █████████████████████████████████████ █████ █████ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
████
███████████ ████████████ █████ ████ ████ ████████ █████████████████ █████████████████ █████████████
████████████████
sortable_list_list_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████████ ███████ ███████████████
███ ██████████████████ █████ ██████ ████ ████████████████
███████ █ ██████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Kanban
Mehrspalten-Board mit Ziehen zwischen und innerhalb von Spalten.
_sortable_list.html.erb
███
████████ ████ █████████ █ ██████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ████████ █
█
███ ███████
██████ ███ ████
██████ █
█ ███ ████ ██████ ███████ █████████ ████████████ ███████ ███████ ███████████ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_kanban_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ ███████████████████ ███ ███████████████ ████ ████████████████
████████ █ ███████
███████████████ █ ██████████████
██████████████ █ █████████████████████ ██ ██
███
███ █████████████
sortable_list_kanban_component.html.erb
████
██████████ █████████████ ███
███████████████████████████████
███████████████████████████████████████
█
██ ████████████ ██ ████████ ██
████
████████████████████ ████ ███████████ ████████████████████ ██████████ ██████ ████████████████ ██████████████████████
███████████
███████████████████ ███████████ ███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Änderungsprotokoll
- v1.0.0: Initial release with list and kanban styles
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten