MotionReorder

Seret untuk mengurutkan ulang daftar atau grid, dengan dukungan keyboard.

WebReact NativeDaftar

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Playlist.jsx

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

Yang ditanganinya untuk Anda

Item lain menyingkir saat Anda menyeret (reorder="live") atau setelah Anda melepas (reorder="drop").
Tata letak daftar dan grid dengan columns dan gap.
Perpindahan dengan keyboard di web, dan aksi aksesibilitas di React Native.
Terkendali dengan items dan onItemsChange, atau tak terkendali dengan defaultItems.

Gunakan untuk

Playlist.
Backlog berprioritas.
Grid foto.

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`readonly T[]`		Item, saat Anda mengendalikan urutannya.
`defaultItems`	`readonly T[]`	`[]`	Item awal, saat komponen yang menyimpan urutannya.
`onItemsChange`	`(items, { reason, key }) => void`		Berjalan dengan urutan baru dan apakah perubahan itu berasal dari seretan, lepasan, atau keyboard.
`getKey`	`(item) => string \| number`	`item`	Mengembalikan key unik untuk sebuah item. Bawaannya item itu sendiri.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Menggambar item; menerima index-nya dan apakah sedang diseret.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` menggeser item lain selama menyeret; `drop` menunggu lepasan.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` atau `grid`.
`columns`	`number`	`3`	Kolom dalam grid.
`gap`	`number`	`12`	Jarak antaritem dalam piksel.
`disabled`	`boolean`	`false`	Mematikan seret.
`duration`	`number`	`260`	Milidetik untuk item yang menyingkir.
`itemClassName`	`string`		Class untuk setiap elemen item; `itemStyle` mengatur gaya inline-nya.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

onItemsChange(items, { reason }) memberi tahu apakah perubahan berasal dari seretan, lepasan, atau keyboard.

Di React Native berlaku props yang sama dan pengurutan juga ditawarkan sebagai aksi aksesibilitas.