React anything sortable

React anything sortable

React anything sortable A ReactJS component that can sort any children with touch support and IE8 compatibility live demo Sort custom style children Sort images Children with custom event handler

This project is in INACTIVE status, bugfix will be maintained, but no new feature will be added. Feel free to use it if it suits your need, for complicated sorting features I'd recommend react-dnd by dan.

react-anything-sortable Build Status npm version Coverage Status


  • Sort any React element you like, images, composite components, etc.
  • No external dependencies but React itself
  • Touch event support
  • Thoroughly tested

Quick Demo

Live Demo

Sort custom style children


Sort images


Children with custom event handler



$ npm install --save react-anything-sortable

// UMD build is provided as well, but please do consider use modern module bundlers like webpack or browserify.

You have to add necessary styles for sortable to work properly, if you're using bundle tools like webpack, just

import 'react-anything-sortable/sortable.css';

Or copy this css to your own style base.

How to use

You can check the straight-forward demo by examining demo folder, or here's a brief example.

In app.js

var ReactDOM = require('react-dom');
var Sortable = require('react-anything-sortable');
var SortableItem = require('./SortableItem');

<Sortable onSort={handleSort}>
  <SortableItem sortData="1" />
  <SortableItem sortData="2" />
, document.body);

and in SortableItem.js

A modern usage would be

import React from 'react';
import { SortableContainer } from 'react-anything-sortable';

class SortableItem extends React.Component {
  render() {
    return (
          your item

Or you want to construct it manually

import React from 'react';
import { sortable } from 'react-anything-sortable';

class SortableItem extends React.Component {
  render() {
    return (
      <div                       // <-- make sure pass props to your own item,
        your item                //     it contains required `className`s and
      </div>                     //     event handlers

Or if you favor the old fashion way

var React = require('react');
var createReactClass = require('create-react-class');
var SortableItemMixin = require('react-anything-sortable').SortableItemMixin;

var SortableItem = createReactClass({
  mixins: [SortableItemMixin],

  render: function(){
    return this.renderWithSortable(  // <-- this.renderWithSortable call is essential
      <div>your item</div>

You can even pass un-sortable children to <Sortable /> and it just works, checkout this demo to find out more. If you do so, remember to add according style to your un-sortable items.



Type: Function Default: () => {}

Being called with sorted data when a sort operation is finished.


  1. sortedArray (Array) Sorted array consists of sortData plucked from each sortable item
  2. currentDraggingSortData (Any) The sortData of dragging element
  3. currentDraggingIndex (Number) The index of dragging element


Type: Bool Default: false

Constrain dragging area within sortable container.



Type: Bool Default: false

Dynamically update the sortable when its children change. If using this option, make sure to use the onSort callback to update the order of the children passed to the Sortable component when the user sorts!



Type: String Default: undefined

A className to allow only matching element of sortable item to trigger sort operation.



Add this props to SortableItem rather than Sortable !

Type: Any Default: undefined

Will be returned by onSort callback in the form of array.


Type: String Default: false Options: vertical, horizontal

Will force dragging direction to vertical or horizontal mode.


  1. Specify your style for Sortable and Sortable Items, check sortable.css, it is NOT optional!
  2. Don't forget the this.renderWithSortable call in SortableItem, or spread props to your component if using decorators.
  3. In order to dynamically add or remove SortableItems or change their order from outside the Sortable, you must use the dynamic option. This also requires using the onSort callback to update the order of the children when sorting happens.
  4. Make sure to add draggable={false} to images within sortable components to prevent glitching. See here for an example.


$ npm run test
$ npm run watch
$ npm run build
$ npm run demo
$ npm run demo:watch


  1. stayradiated
  2. vizath
  3. zthomas
  4. jakubruffer
  5. Fabeline
  6. antialiasis
  7. JasonKleban

Github Repository