Description:
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:
