MotionReorder

Trageți pentru a reordona o listă sau o grilă, cu suport de tastatură.

WebReact NativeListe

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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;
}

Cea mai scurtă utilizare

Playlist.jsx

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

Ce rezolvă în locul dumneavoastră

Celelalte elemente se dau la o parte cât trageți (reorder="live") sau după ce eliberați (reorder="drop").
Layouturi de listă și grilă cu columns și gap.
Mutări cu tastatura pe web și acțiuni de accesibilitate în React Native.
Controlat cu items și onItemsChange sau necontrolat cu defaultItems.

Folosiți-o pentru

Un playlist.
Un backlog prioritizat.
O grilă de fotografii.

Props

Prop	Tip	Implicit	Descriere
`items`	`readonly T[]`		Elementele, când controlați dumneavoastră ordinea.
`defaultItems`	`readonly T[]`	`[]`	Elementele de pornire, când componenta păstrează ordinea.
`onItemsChange`	`(items, { reason, key }) => void`		Rulează cu noua ordine și cu sursa ei: tragere, eliberare sau tastatură.
`getKey`	`(item) => string \| number`	`item`	Returnează un key unic pentru un element. Implicit, elementul însuși.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Desenează un element; primește indexul și dacă este tras.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` mută celelalte elemente în timpul tragerii; `drop` așteaptă eliberarea.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` sau `grid`.
`columns`	`number`	`3`	Coloane într-o grilă.
`gap`	`number`	`12`	Spațiul dintre elemente, în pixeli.
`disabled`	`boolean`	`false`	Dezactivează tragerea.
`duration`	`number`	`260`	Milisecunde pentru elementele care se dau la o parte.
`itemClassName`	`string`		Clasă pentru fiecare element din listă; `itemStyle` îi setează stilul inline.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

onItemsChange(items, { reason }) vă spune dacă o schimbare a venit dintr-o tragere, o eliberare sau de la tastatură.

În React Native se aplică aceleași props, iar reordonarea este oferită și ca acțiuni de accesibilitate.