ReactJS - Kéo thả sắp xếp các phần tử trong danh sách

Bài đăng này đã không được cập nhật trong 2 năm

Bài viết này, mình sẽ hướng dẫn các bạn sử dụng thư viện React Sortable để kéo thả sắp xếp các phần tử.

Cài đặt

Đầu tiên, chúng ta cần cài đặt thư viện bằng cách chạy lệnh:

$ npm install react-sortable-hoc --save

Cách dùng

Ví dụ mình có 1 danh sách các phần tử, và mình muốn có thể hiển thị và kéo thả để sắp xếp chúng.

Component hiển thị từng phần tử

Đầu tiên, mình sẽ tạo component có chức năng hiển thị ra từng phần tử:

// item.jsx

import {SortableElement} from 'react-sortable-hoc';

export default class Item extends React.Component {
  render() {
    const SortableItem = SortableElement(({item}) => {
      return (
        <div style={{
          border: '2px solid #F00',
          background: '#0DD',
          padding: '10px',
          marginBottom: '10px'
        }}>
          {item}
        </div>
      );
    });

    return <SortableItem index={this.props.index} item={this.props.item} />;
  }
}

Component hiển thị danh sách các phần tử

Sau đó tạo 1 component gọi ra component trên để hiển thị ra danh sách các phần tử:

// list.jsx

import {SortableContainer} from 'react-sortable-hoc';
import Item from './item';

export default class List extends React.Component {
  render() {
    const SortableList = SortableContainer(({items}) => {
      let list_items = items.map((item, index) => {
        return <Item item={item} index={index} key={index} />;
      });

      return (
        <div style={{background: '#FF0'}}>{list_items}</div>
      );
    });

    return (
      <SortableList items={this.props.items} onSortEnd={this.props.onSortEnd} />
    );
  }
}

Hiển thị danh sách các phần tử

Cuối cùng, gọi component List ở nơi mà bạn muốn hiển thị ra danh sách các phần tử:

import {arrayMove} from 'react-sortable-hoc';
import List from './list';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  }

  render() {
    return (
      <List items={this.state.items} onSortEnd={this.onSortEnd.bind(this)} />
    );
  }

  onSortEnd({oldIndex, newIndex}) {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  }
}