react-sortable-item

react-sortable-item

Reorder elements in a list. Uses the native HTML5 Drag and Drop API.

See example.

This library is quite different from others in that treats the reindexing strategy as an implementation detail.

Install

npm install react-sortable-item

Example

import SortableItem from 'react-sortable-item'

var ExampleSortableList = React.createClass({
  handleDrop: function(dropPath, position, event) {},

  handleAcceptTest: function(event) {},

  render: function() {
    var list = yourRecords.map(function(record) {
      return (
        <SortableItem
            key={record.id}
            type={record.type}
            data={record.path}
            handleDrop={this.handleDrop}
            handleAcceptTest={this.handleAcceptTest}>
          <li>
            <div className="li-inner">
              {record.label}
            </div>
          </li>
        </SortableItem>
      );
    }.bind(this))
    return (
      <ul>
        {list}
      </ul>
    )
  }
})

License

MIT