raisezhang/react-drag-listview

A simple draggable list component for React

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

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.