node package manager



Sortable is a minimalist library for rearranging items in lists.

This library provides a Sortable React component (ReactSortable).

What does ReactSortable do for you?

  • It instantiates a Sortable object.
  • It renders its children in the order specified by that Sortable object.
  • It reuses DOM nodes where possible, based on child keys. While React normally does this, it does not allow the user to specify the order.
  • This implementation is based on Pete Hunt's React component for jQuery Sortable.

How do I use it?

    // Vanilla Sortable options 
      // Specify the draggable cells. 
      draggable: '.todoList-draggable',
      // Disable dragging on certain cells. 
      filter: '.todoItem-ignore',
      // Limit the draggable area to a part of the cell. 
      handle: '.todoItem-handle',
      // Receive the new order order. 
      onSort: this.handleSort
    // Component name for Sortable container (optional, default "div") 
    // This is instantiated as a virtual DOM node, so it can be an HTML element or 
    // a React component. 
    // Element name for Sortable items (optional, default "div") 
    // This is instantiated as an actual DOM element, so it must be an HTML element. 
    // Other props are passed on to the Sortable container 
  {_(this.state.todos).map(function (todo) {
    return (
      <TodoItem key={}
            'todoItem-ignore': this.isTodoIgnored(todo)

Callback Signature

  • With vanilla Sortable, this is bound to the Sortable object, making it difficult to bind Sortable callbacks directly to component methods.
  • With ReactSortable, this is bound to the React component.
var TodoList = React.createClass({
  handleSort: function (sortable, e) {
    // Prints child keys
    console.log('New todo order:', sortable.toArray());
  render: function () {
    return (
          onSort: this.handleSort