react-anything-sortable

A ReactJS component that can sort any children with touch support and IE8 compatibility - http://jasonslyvia.github.io/react-anything-sortable/demo/

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 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');  
 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 { SortableContainer } from 'react-anything-sortable';  
 @sortable  
 class SortableItem extends React.Component {  
  render() {  
   return (  
    <SortableContainer>  
     <div>  
      your item  
     </div>  
    </SortableContainer>  
   );  
  }  
 };  

Or you want to construct it manually

 import React from 'react';  
 import { sortable } from 'react-anything-sortable';  
 @sortable  
 class SortableItem extends React.Component {  
  render() {  
   return (  
    <div            // <-- make sure pass props to your own item,  
     className={this.props.className}  
     style={this.props.style}  
     onMouseDown={this.props.onMouseDown}  
     onTouchStart={this.props.onTouchStart}  
    >  
     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 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

dynamic

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! 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.

direction

Type: String Default: false Options: vertical, horizontal
Type: Any Default: undefined
Will force dragging direction to vertical or horizontal mode.

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. 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.

Note: Special thanks to Sen Yang

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.