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