react-anything-sortable

Features

• 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

Installation

If you're using React v0.13, please use react-anything-sortable@0.x instead, it's the latest compatible version.

$ npm install --save react-anything-sortable

// if you're using React v0.13, try
$ npm install --save react-anything-sortable@0.x

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

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');

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

and in SortableItem.js

A modern usage would be

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

@sortable
class SortableItem extends React.Component {
  render() {
    return (
      <div {...this.props}>      // <-- make sure destructure 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 SortableItemMixin = require('react-anything-sortable').SortableItemMixin;

var SortableItem = React.createClass({
  mixins: [SortableItemMixin],

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

Props

onSort

Type: Function Default: () => {}

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

Arguments

1. sortedArray (Array) Sorted array consists of sortData plucked from each sortable item

containment

Type: Bool Default: false

Constrain dragging area within sortable container.

sortData

Add this props to SortableItem rather than Sortable !

Type: Any Default: undefined

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

Sort Element Props

to further customize the behaviour you can pass in a sort handle class to the element being sorted. If the sort event target doesn't match this class it will not trigger any sorting action. This helps on mobile devices when elements may take up an entire row and the user needs space to scroll.

...
  <Sortable onSort={ this.handleSort } >
    <SortableItem sortHandleClass="sort-handle" >
  </Sortable>
...

Notice

1. Specify your style for Sortable and Sortable Items, check demo/style.css, it is NOT optional!
2. Don't forget the this.renderWithSortable call in SortableItem
3. Since we can't track any children modification in Sortable, you have to use key to force update Sortable when adding/removing children. Checkout dynamic demo for more details.

Scripts

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

Contributors

1. stayradiated
2. vizath