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

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ử.

Đầ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

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

Kết quả sẽ ra như sau:

Vậy là bạn có thể kéo từng phần tử đến vị trí khác trong danh sách và thả phần tử đó ra để sắp xếp lại danh sách của mình.