React DND Sortable

React DND sortable wrapper, with support for multiple item drag-and-drop.

Installation

npm install --save react-dnd-sortable-hoc

Usage

Component to be made sortable:

class Item extends React.Component {
  render() {
    const {
      index,
      handle,
      element,
      isDragging,
      isSelected,
      inStack,
    } = this.props

    return (
      <div
        className={classnames({
          'is-dragging': isDragging,
          'is-selected': isSelected,
          'in-stack': inStack,
        })}
      >
        {handle}
        {element.name}
      </div>
    )
  }
}

Render sortable list:

import ReactDNDSortable from 'react-dnd-sortable-hoc'

class SortableComponent extends React.Component {
  state = {
    elements: Array.from(new Array(20)).map((x, idx) => ({ id: idx, name: `Item ${idx}` })),
    selected: [],
  }

  onMove = (from, to, stack, elements) => {
    this.setState({ elements })
  }

  onSave = () => {
    console.log('handle save')
  }

  onSelect = (element, elements) => {
    this.setState({ selected: elements })
  }

  render() {
    const { elements, selected } = this.state

    return (
      <ReactDNDSortable
        elements={elements}
        selected={selected}
        onMove={this.onMove}
        onSave={this.onSave}
        onSelect={this.onSelect}
        SortableElement={Item}
        dragHandle={(<span>==</span>)}
        animated={{
          y: {
            height: 50,
            margin: 10,
          }
        }}
      />
    }
  }
}