Draggable List Component For React

A drag and drop list component for React app.

Installation:

# Yarn
$ yarn add react-drag-list

# NPM
$ npm install react-drag-list --save

Usage:

Import necessary resources into the project.

import React from 'react';
import ReactDOM from 'react-dom';

import ReactDragList from '../src/';
import 'react-drag-list/assets/index.less';

import './style/simple.less';

The example JavaScript.

const dataArray = [
  {
    color: '#FF5500',
    title: 'Senior Product Designer',
    text: 'Senior Product Designer',
  },
  {
    color: '#5FC296',
    title: 'Senior Animator',
    text: 'Senior Animator',
  },
  {
    color: '#2DB7F5',
    title: 'Visual Designer',
    text: 'Visual Designer',
  },
  {
    color: '#FFAA00',
    title: 'Computer Engineer',
    text: 'Computer Engineer',
  },
];

class Simple extends React.Component {
  render() {
    return (
      <div className="simple">
        <ReactDragList
          dataSource={dataArray}
          row={(record, index) => (
            <div key={index} style={{ color: record.color }}>
              <div className="simple-drag-row-title">{record.title}</div>
              <span>{record.text}</span>
            </div>
          )}
          handles={false}
          className="simple-drag"
          rowClassName="simple-drag-row"
        />
      </div>
    );
  }
}

Render a draggable list in the document.

ReactDOM.render(<Simple />, document.getElementById('__react-content'));

Preview:

Download Details:

Author: alcat2008

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/alcat2008/react-drag-list

License: MIT