node package manager

react-rubaxa-sortable

Sortable

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?

<ReactSortable
    // Vanilla Sortable options 
    sortable={{
      // 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. 
    component="ul"
 
    // Element name for Sortable items (optional, default "div") 
    // This is instantiated as an actual DOM element, so it must be an HTML element. 
    childElement="div"
 
    // Other props are passed on to the Sortable container 
    className="todoList">
  {_(this.state.todos).map(function (todo) {
    return (
      <TodoItem key={todo.id}
          className={React.addons.classSet({
            'todoItem-ignore': this.isTodoIgnored(todo)
          })}
          todo={todo}/>
    );
  }.bind(this)).value()}
</ReactSortable>

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 (
      <ReactSortable
        sortable={{
          onSort: this.handleSort
        }}
        ...
      </ReactSortable>
    );
  }
});