2.0.0 • Published 2 years ago

react-drag-listview v2.0.0

Weekly downloads
8,749
License
MIT
Repository
github
Last release
2 years ago

react-drag-listview

React drag list component.

NPM version build status npm download

install

rc-table

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

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

3 years ago

0.2.0

3 years ago

0.1.9

3 years ago

0.1.8

4 years ago

0.1.7

5 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