MotionReorder

Zum Umsortieren einer Liste oder eines Rasters ziehen, mit Tastaturunterstützung.

WebReact NativeListen

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

App.jsx

import { useState } from 'react';
import { MotionReorder } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const tracks = [
  { id: 'intro', title: 'Intro', length: '0:48' },
  { id: 'morning', title: 'Morning Light', length: '3:21' },
  { id: 'harbor', title: 'Harbor', length: '4:02' },
  { id: 'chorus', title: 'Chorus Line', length: '2:57' },
  { id: 'night', title: 'Night Drive', length: '5:10' },
  { id: 'outro', title: 'Outro', length: '1:15' },
];

export default function App({ reorder = 'live', layout = 'list' }) {
  const [items, setItems] = useState(tracks);

  return (
    <div className="stage">
      <MotionReorder
        className={`playlist ${layout}`}
        itemClassName="track"
        items={items}
        onItemsChange={setItems}
        getKey={(track) => track.id}
        reorder={reorder}
        layout={layout}
        columns={3}
        gap={8}
        renderItem={(track, { index, dragging }) => (
          <div className={dragging ? 'row dragging' : 'row'}>
            <span className="index">{index + 1}</span>
            <strong>{track.title}</strong>
            <span className="length">{track.length}</span>
          </div>
        )}
      />
      <p className="hint">Drag a handle, or focus it and use the arrow keys.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track > button {
  flex: none;
  width: 36px;
  height: 44px;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  background: #f4faf7;
  color: #176b52;
  font-size: 18px;
}

.grid .track {
  flex-direction: column;
  align-items: stretch;
}

.grid .track > button {
  width: 100%;
  height: 32px;
}

.row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
  user-select: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.row.dragging {
  border-color: #176b52;
  box-shadow: 0 10px 24px rgba(14, 46, 36, 0.16);
}

.grid .row {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  text-align: center;
}

.index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font:
    700 12px system-ui,
    sans-serif;
}

.row strong {
  flex: 1;
  color: #0e2e24;
}

.length {
  color: #5b616b;
  font-variant-numeric: tabular-nums;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Kürzeste Nutzung

Playlist.jsx

<MotionReorder
  items={tracks}
  onItemsChange={setTracks}
  layout="list"
  renderItem={(track) => track.title}
/>;

Was sie dir abnimmt

Andere Elemente weichen beim Ziehen (reorder="live") oder beim Ablegen (reorder="drop") aus.
Listen- und Raster-Layouts mit columns und gap.
Tastaturbewegungen im Web und Barrierefreiheitsaktionen unter React Native.
Kontrolliert mit items und onItemsChange oder unkontrolliert mit defaultItems.

Gut für

Eine Playlist.
Ein priorisiertes Backlog.
Ein Fotoraster.

props

Prop	Typ	Standard	Beschreibung
`items`	`readonly T[]`		Die Elemente, wenn du die Reihenfolge kontrollierst.
`defaultItems`	`readonly T[]`	`[]`	Startelemente, wenn die Komponente die Reihenfolge verwaltet.
`onItemsChange`	`(items, { reason, key }) => void`		Läuft mit der neuen Reihenfolge und ob sie vom Ziehen, Ablegen oder von der Tastatur kam.
`getKey`	`(item) => string \| number`	`item`	Gibt einen eindeutigen Key für ein Element zurück. Standard ist das Element selbst.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Zeichnet ein Element; erhält seinen Index und ob es gerade gezogen wird.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` bewegt andere Elemente beim Ziehen; `drop` wartet auf das Ablegen.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` oder `grid`.
`columns`	`number`	`3`	Spalten in einem Raster.
`gap`	`number`	`12`	Abstand zwischen Elementen in Pixeln.
`disabled`	`boolean`	`false`	Schaltet das Ziehen aus.
`duration`	`number`	`260`	Millisekunden für ausweichende Elemente.
`itemClassName`	`string`		Klasse für jedes Eintragselement; `itemStyle` setzt seinen Inline-Style.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

onItemsChange(items, { reason }) sagt dir, ob eine Änderung vom Ziehen, Ablegen oder von der Tastatur kam.

Unter React Native gelten dieselben props, und Umsortieren wird auch als Barrierefreiheitsaktion angeboten.