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

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

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

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.

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
2. currentDraggingSortData (Any) The sortData of dragging element
3. currentDraggingIndex (Number) The index of dragging element

containment

Type: Bool Default: false

Constrain dragging area within sortable container.

demo

sortHandle

Type: String Default: undefined

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

demo

sortData

Add this props to SortableItem rather than Sortable !

Type: Any Default: undefined

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

Notice

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. 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.
4. Make sure to add draggable={false} to images within sortable components to prevent glitching. See here for an example.

Scripts

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

Contributors

1. stayradiated
2. vizath
3. zthomas
4. jakubruffer