SortableList Demo

SortableList

SortableList<TItem> ermöglicht das Umsortieren von Listen per Drag & Drop. Der optionale DragHandleSelector beschränkt das Ziehen auf ein Handle-Icon. Über Filter können Items ausgeblendet werden, ohne sie aus der Quellliste zu entfernen. Nach jedem Drop wird OnReorder mit der aktualisierten Liste aufgerufen.

Ohne ItemTemplate

Kein Template angegeben – die Komponente rendert item.ToString() direkt.

Montag

Dienstag

Mittwoch

Donnerstag

Freitag

Reihenfolge:

Montag → Dienstag → Mittwoch → Donnerstag → Freitag

Einfache Liste

Ganzes Item ist draggable – kein separates Handle nötig.

Alpha

Beta

Gamma

Delta

Epsilon

Reihenfolge:

Alpha → Beta → Gamma → Delta → Epsilon

Mit Drag-Handle

Nur das drag_indicator-Icon ist der Startpunkt – Buttons und Links bleiben klickbar.

Design reviewen Hoch

Tests schreiben Mittel

Dokumentation Niedrig

Deployment vorbereiten Hoch

Code review Mittel

Reihenfolge:

1. Design reviewen

2. Tests schreiben

3. Dokumentation

4. Deployment vorbereiten

5. Code review

Mit Filter

Gelöschte Items werden ausgeblendet, bleiben aber in der Quellliste. Nur sichtbare Items sind sortierbar.

bericht-2024.pdf

foto-header.jpg

daten-export.xlsx

praesentation.pptx

readme.md

Sichtbar (5 von 5):

1. bericht-2024.pdf

2. foto-header.jpg

3. daten-export.xlsx

4. praesentation.pptx

5. readme.md

Horizontale Liste

Mit Orientation="OoOrientation.Horizontal" werden Items nebeneinander angeordnet und die Drop-Logik wechselt auf die X-Achse.

Rot

Grün

Blau

Gelb

Lila

Reihenfolge: Rot → Grün → Blau → Gelb → Lila

Horizontal mit Drag-Handle

Karten horizontal sortierbar – nur am drag_indicator-Handle ziehbar.

Jan

Feb

Mär

Apr

Mai

Jun

Reihenfolge: Jan → Feb → Mär → Apr → Mai → Jun

class & style

Die Komponente akzeptiert das native class- und style-Attribut.

style (min-width)

Eins

Zwei

Drei

SKILL.md – Sortablelist

---
name: SortableList
description: Onesown Blazor Komponente SortableList (Grouping). Verwende diesen Skill wenn du die SortableList-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# SortableList

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Grouping  
**Basisklasse:** `OoComponentBase`  
**Generisch:** Ja (`SortableList<TItem>` o.ae.)  

Generische Sortable-List-Komponente mit HTML5 Drag &amp; Drop. Komplette Drag-Logik in JS, Blazor wird per DotNet-Interop beim Drop benachrichtigt.

**Live-Demo:** https://components.schini.com/demo/sortablelist  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Items`` | ``List<TItem>`` |  | Die vollstaendige Liste (inkl. gefilterter Eintraege). |
| ``Filter`` | ``Func<TItem, bool>`` |  | Optionaler Filter – nur gefilterte Items werden angezeigt und sind sortierbar. |
| ``ItemTemplate`` | ``RenderFragment<TItem>`` |  | Template fuer ein einzelnes Item. Wenn nicht angegeben, wird item.ToString() verwendet. |
| ``OnReorder`` | ``EventCallback<List<TItem>>`` |  | Wird nach einem Drop-Event ausgeloest. Liefert die Items-Liste mit aktualisierter Reihenfolge. |
| ``DragHandleSelector`` | ``string`` |  | CSS-Selektor fuer den Drag-Handle (z.B. ".oo-sortable-handle"). Wenn leer, ist das gesamte Item draggable. |
| ``Orientation`` | ``OoOrientation`` | ``OoOrientation.Vertical`` | Ausrichtung der Liste. Standard: Vertical. Bei Horizontal werden Items nebeneinander angeordnet und die Drop-Logik wechselt auf die X-Achse. |

## Geerbte Parameter (OoComponentBase)

Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht.

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` |  | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |

## Hinweise

- Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben
- Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben
- Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht
- Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl)
- Basis-Verwendung: Items="@_liste" OnReorder="OnReorderHandler" – Liste wird nach Drop aktualisiert
- Item-Darstellung: ItemTemplate="@(item => @&lt;div&gt;@item.Name&lt;/div&gt;)" für eigenes Rendering; ohne Template wird ToString() verwendet
- Drag-Handle: DragHandleSelector=".mein-handle" beschränkt das Ziehen auf ein bestimmtes Element
- Gefilterte Listen: Filter="item => item.Aktiv" zeigt nur passende Items, sortiert aber die Originalliste
- Horizontale Anordnung: Orientation="OoOrientation.Horizontal" für nebeneinander liegende Items
- OnReorder liefert die vollständige Items-Liste mit aktualisierter Reihenfolge – direkt als neue Quelle verwenden