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

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

react-drag-listview

install

Use on mobile (touch) devices

Example

Drag Rows

Drag Columns

Development

Usage

API

Properties

License

Current Tags

23 Versions