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

  • Simple dragging demo
  • Dragging Ant-Design table
  • Dragging Ant-Design table width expanded rows
  • Dragging Ant-Design transfer items
  • Dragging Ant-Design Nested List Items

• Drag Columns

  • Simple dragging columns demo
  • Dragging Ant-Design table 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.