Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raisezhang/react-drag-listview
A simple draggable list component for React
https://github.com/raisezhang/react-drag-listview
draggable react table-drag
Last synced: about 2 months ago
JSON representation
A simple draggable list component for React
- Host: GitHub
- URL: https://github.com/raisezhang/react-drag-listview
- Owner: raisezhang
- License: mit
- Fork: true (lennardvandenberg/react-drag-listview)
- Created: 2017-04-21T04:29:18.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T13:08:59.000Z (over 1 year ago)
- Last Synced: 2024-04-25T19:44:38.316Z (5 months ago)
- Topics: draggable, react, table-drag
- Language: JavaScript
- Homepage:
- Size: 2.68 MB
- Stars: 232
- Watchers: 2
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-drag-listview
React drag list component.
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/react-drag-listview.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-drag-listview
[travis-image]: https://img.shields.io/travis/raisezhang/react-drag-listview.svg?style=flat-square
[travis-url]: https://travis-ci.org/raisezhang/react-drag-listview
[download-image]: https://img.shields.io/npm/dm/react-drag-listview.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-drag-listview
## install
[](https://npmjs.org/package/react-drag-listview)
## Use on mobile (touch) devices
* `react-drag-listview` already supports mobile (touch) devices, which can be easily implemented based on the [dragdroptouch](https://github.com/Bernardo-Castilho/dragdroptouch) polyfill
* Need to manually add polyfill `dragdroptouch` to your website. e.g.
```html
```
* Example: [Drag on mobile devices](https://codepen.io/raisezhang/pen/wvpVbQO)
## Example
* ###### Drag Rows
* [Simple dragging demo](https://raisezhang.github.io/react-drag-listview/examples/simple.html)
* [Dragging Ant-Design table](https://codepen.io/raisezhang/pen/MmjypX)
* [Dragging Ant-Design table width expanded rows](https://codepen.io/raisezhang/pen/OrrGJL)
* [Dragging Ant-Design transfer items](https://codepen.io/raisezhang/pen/rNdGEzN)
* [Dragging Ant-Design Nested List Items](https://codesandbox.io/s/react-drag-listview-nested-drag-example-mdrbh?file=/src/questions.js)
* ###### Drag Columns
* [Simple dragging columns demo](https://raisezhang.github.io/react-drag-listview/examples/dragColumn.html)
* [Dragging Ant-Design table columns](https://codepen.io/raisezhang/pen/MoMoyz)
## Development
```bash
npm install
npm start
```
## Usage
```javascript
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 (
{this.state.data.map((item, index) => (
-
{item.title}
Drag
))}
);
}
}
```
## API
### Properties
Name
Type
Default
Description
onDragEnd
Function(fromIndex, toIndex)
on drag end callback, required
nodeSelector
String
tr
get drag item cssQuery
handleSelector
String
nodeSelector
get drag handle cssQuery
ignoreSelector
String
ignore node list
enableScroll
Boolean
true
whether use auto scroll for dragging
scrollSpeed
Number
10
scroll speed
lineClassName
String
get dragLine's className, css properties must be use !important
## License
react-drag-listview is released under the MIT license.