/react-drag-listview

A simple draggable list component for React

Primary LanguageJavaScriptMIT LicenseMIT

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

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.