2.0.0 • Published 2 years ago
react-drag-listview v2.0.0
react-drag-listview
React drag list component.
install
Use on mobile (touch) devices
react-drag-listview
already supports mobile (touch) devices, which can be easily implemented based on the dragdroptouch polyfill- Need to manually add polyfill
dragdroptouch
to your website. e.g.<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>
- Example: Drag on mobile devices
Example
Drag Rows
Drag Columns
Development
npm install
npm start
Usage
const ReactDragListView = require('react-drag-listview');
class Demo extends React.Component {
constructor(props) {
super(props);
const data = [];
for (let i = 1, len = 7; i < len; i++) {
data.push({
title: `rows${i}`
});
}
this.state = {
data
};
}
render() {
const that = this;
const dragProps = {
onDragEnd(fromIndex, toIndex) {
const data = [...that.state.data];
const item = data.splice(fromIndex, 1)[0];
data.splice(toIndex, 0, item);
that.setState({ data });
},
nodeSelector: 'li',
handleSelector: 'a'
};
return (
<ReactDragListView {...dragProps}>
<ol>
{this.state.data.map((item, index) => (
<li key={index}>
{item.title}
<a href="#">Drag</a>
</li>
))}
</ol>
</ReactDragListView>
);
}
}
API
Properties
License
react-drag-listview is released under the MIT license.
2.0.0
2 years ago
0.2.2
2 years ago
0.2.1
2 years ago
0.2.0
3 years ago
0.1.9
3 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
8 years ago
0.0.6
8 years ago
0.0.5
8 years ago
0.0.3
8 years ago
0.0.2
8 years ago
0.0.1
8 years ago
1.0.0
8 years ago