Datensätze per Drag & Drop sortieren

Mit dem b4um Sortable Generator ergänzt du bestehende Datensätze um eine dauerhaft gespeicherte Reihenfolge. Die Sortierung erfolgt bequem per Drag & Drop – Model, Controller, Route und Stimulus-Logik werden automatisch eingerichtet.

Datensätze mit Sortable per Drag & Drop sortieren

Manchmal reicht es nicht aus, Datensätze nach Name oder Erstellungsdatum zu sortieren. Produkte, Beiträge oder andere Inhalte sollen stattdessen in einer individuell festgelegten Reihenfolge erscheinen.

Der b4um Generator übernimmt dafür die komplette Grundlage. Mit einem einzigen Generator-Aufruf erhält dein bestehendes Model eine Positionsverwaltung und die Index-Seite wird zu einer Drag-&-Drop-Sortieransicht.

In diesem Beispiel verwenden wir ein vorhandenes Product-Model.

Ausgangspunkt

Unsere Anwendung besitzt bereits Produkte und eine normale Produktübersicht. Das Model wurde beispielsweise mit dem b4um Scaffold Generator erstellt:

bin/rails generate b4um:scaffold Product name:string description:text price:decimal
bin/rails db:migrate

Die Produkte werden bisher über die normale Index-Ansicht dargestellt.

Hinweis: Sortable wird auf ein bereits vorhandenes Model angewendet. In unserem Beispiel heißt dieses Model Product.

Sortable installieren

Um die Produkte sortierbar zu machen, genügt:

bin/rails generate b4um:sortable Product

Der Generator richtet die benötigten Bestandteile automatisch ein. Unter anderem werden eine Migration für position, die Sortierlogik im Model und Controller, eine PATCH-Route, ein Stimulus Controller sowie das Sortable-Partial erzeugt.

Die vorhandene Index-Seite wird anschließend automatisch auf die Sortieransicht umgestellt.

Die Ausgabe sieht beispielsweise so aus:

create  db/migrate/..._add_position_to_products.rb
insert  app/models/product.rb
sortable  Product now assigns sortable positions
gsub    app/controllers/products_controller.rb
insert  app/controllers/products_controller.rb
gsub    config/routes.rb
create  app/javascript/controllers/sortable_controller.js
create  app/views/products/_sortable.html.erb

Migration ausführen

Nach dem Generator muss noch die Datenbankmigration ausgeführt werden:

bin/rails db:migrate

Dadurch erhält die Tabelle products die neue Spalte position.

Bei unserem Beispiel sieht die Migration so aus:

add_column(:products, :position, :integer)
change_column_null(:products, :position, false)
add_index(:products, :position)

Bereits vorhandene Datensätze erhalten dabei ihre anfängliche Reihenfolge.

Die neue Sortieransicht

Nach einem Reload von

/products

erscheint anstelle der bisherigen Index-Darstellung die Sortable-Ansicht.

Sortable-Ansicht unmittelbar nach der Installation

Jeder Datensatz besitzt jetzt links seine aktuelle Positionsnummer und einen Drag-Handle.

Die Reihenfolge lässt sich direkt mit der Maus verändern.

Reihenfolge per Drag & Drop ändern

In unserem Beispiel ziehen wir die USB-C Dockingstation von Position 4 ganz nach oben auf Position 1.
Aus:

1  Aluminium Laptopständer
2  Mechanische Tastatur
3  Wireless Mouse
4  USB-C Dockingstation

wird:

1  USB-C Dockingstation
2  Aluminium Laptopständer
3  Mechanische Tastatur
4  Wireless Mouse

Die Positionsnummern werden dabei automatisch aktualisiert.

USB-C Dockingstation nach dem Verschieben auf Position 1

Die Änderung findet nicht nur im Browser statt. Die neue Reihenfolge wird unmittelbar in der Datenbank gespeichert.

Lädst du /products anschließend neu, bleibt die neue Reihenfolge erhalten.

Was erledigt der Generator im Hintergrund?

Du musst die Sortierlogik nicht selbst programmieren. Der Generator erweitert mehrere Bereiche deiner Rails-Anwendung automatisch.

Im Product-Model wird unter anderem dafür gesorgt, dass ein neu angelegtes Produkt automatisch die nächste freie Position erhält:

before_create :b4um_set_sortable_position
after_destroy :b4um_compact_sortable_positions

Dadurch werden neue Datensätze am Ende einsortiert. Wird ein Datensatz gelöscht, werden die nachfolgenden Positionen wieder zusammengezogen.

Auch die Index-Abfrage wird angepasst:

def index
  @products = Product.order(:position, :id)
end

Damit richtet sich die Darstellung nicht mehr nach der Datenbank-ID oder dem Erstellungsdatum, sondern nach der gespeicherten Position.

Sortierung speichern

Zusätzlich ergänzt der Generator eine Collection-Route:

resources :products do
  patch :sort, on: :collection
end

Wenn ein Produkt verschoben wird, sendet der Stimulus Controller die neue Position an diese Route.

Der erzeugte sort-Endpunkt prüft die gewünschte Position und aktualisiert innerhalb einer Datenbanktransaktion sowohl den verschobenen Datensatz als auch die betroffenen Datensätze dazwischen.

Du musst dafür weder JavaScript noch eine eigene Sortierlogik schreiben.

Neue Datensätze

Auch nach der Installation von Sortable kannst du ganz normal weitere Produkte anlegen.

Ein neuer Datensatz erhält automatisch die nächste Position und wird damit am Ende der bestehenden Reihenfolgeeingefügt.

Anschließend kannst du ihn per Drag & Drop an die gewünschte Stelle verschieben.

Fertig

Mit nur zwei Befehlen:

bin/rails generate b4um:sortable Product
bin/rails db:migrate

wird aus einer normalen Index-Seite eine persistente Drag-&-Drop-Sortierung.

Der b4um Sortable Generator übernimmt dabei:

die position-Spalte und Migration,
die automatische Positionsverwaltung im Model,
die sortierte Index-Abfrage,
den Controller-Endpunkt zum Speichern,
die benötigte Route,
den Stimulus Controller und
die Sortable-Ansicht.

Die festgelegte Reihenfolge bleibt auch nach einem Reload erhalten und kann jederzeit erneut verändert werden.

Meld dich an und schreibe ein Kommentar