MotionReorder

Kéo để sắp xếp lại danh sách hoặc lưới, có hỗ trợ bàn phím.

WebReact NativeDanh sách

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Playlist.jsx

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

Những gì nó xử lý giúp bạn

Các mục khác tránh đường trong lúc bạn kéo (reorder="live") hoặc khi bạn thả (reorder="drop").
Bố cục danh sách và lưới với columns và gap.
Di chuyển bằng bàn phím trên web, và thao tác trợ năng trên React Native.
Có kiểm soát với items và onItemsChange, hoặc không kiểm soát với defaultItems.

Dùng cho

Danh sách phát.
Danh sách việc tồn đọng theo ưu tiên.
Lưới ảnh.

Props

Prop	Kiểu	Mặc định	Mô tả
`items`	`readonly T[]`		Các mục, khi bạn kiểm soát thứ tự.
`defaultItems`	`readonly T[]`	`[]`	Các mục ban đầu, khi component tự giữ thứ tự.
`onItemsChange`	`(items, { reason, key }) => void`		Chạy với thứ tự mới và cho biết nó đến từ kéo, thả hay bàn phím.
`getKey`	`(item) => string \| number`	`item`	Trả về key duy nhất cho một mục. Mặc định là chính mục đó.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Vẽ một mục; nhận index của nó và việc nó có đang được kéo không.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` dời các mục khác trong lúc kéo; `drop` chờ đến khi thả.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` hoặc `grid`.
`columns`	`number`	`3`	Số cột trong lưới.
`gap`	`number`	`12`	Khoảng cách giữa các mục tính bằng pixel.
`disabled`	`boolean`	`false`	Tắt kéo.
`duration`	`number`	`260`	Mili giây cho các mục tránh đường.
`itemClassName`	`string`		Class cho từng phần tử mục; `itemStyle` đặt style nội tuyến của nó.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

onItemsChange(items, { reason }) cho bạn biết thay đổi đến từ kéo, thả hay bàn phím.

Trên React Native áp dụng cùng props và việc sắp xếp cũng được cung cấp dưới dạng thao tác trợ năng.