React Sortable Component

A simple sortable component for ReactJS.

Installation

npm install --save react-sortable-component

Usage

JS

var {SortableItems, SortableItem} = require('react-sortable-component');
...
state = {
  items: [
    {src: 'http://lorempixel.com/400/400/sports/1'},
    {src: 'http://lorempixel.com/400/400/sports/2'},
    {src: 'http://lorempixel.com/400/400/sports/3'},
    {src: 'http://lorempixel.com/400/400/sports/4'},
    {src: 'http://lorempixel.com/400/400/sports/5'},
    {src: 'http://lorempixel.com/400/400/sports/6'}
  ]
};
 
handleSort = (items) => {
  this.setState({
    items: items
  });
};
 
render() {
  let {items} = this.state;
  return (
    <Document title="Home | React sortable component" className="page-home">
      <SortableItems name="simple-sort"
        className="simple-sort-items"
        items={items}
        onSort={this.handleSort}>
        {
          items.map((item, index) => {
            return (
              <SortableItem key={item.src}
                draggable={index !== 3}
                className="simple-sort-item">
                <LazySizes className="pointer-events-none"
                  dataSrc={item.src}
                  width="126"
                  height="126"/>
              </SortableItem>
            );
          })
        }
      </SortableItems>
    </Document>
  );
}
 

CSS

Webpack:

require('react-sortable-component/lib/sortable.css');

Without Webpack:

<link rel="stylesheet" type="text/css" href="path/to/react-sortable-component/lib/sortable.css">

or apply your style:

[draggable] {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
}
 
.sortable-items {
  margin-left: -10px;
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}
 
.sortable-item {
  height: 150px;
  width: 150px;
  padding: 10px;
  border-radius: 2px;
  float: left;
  margin-left: 10px;
  text-align: center;
  border: 1px solid #DDD;
  background-color: #fff;
  cursor: move;
  .pointer-events-none {
    pointer-events: none;
  }
}
 
.sortable-item-over {
  border: 1px dashed #DDD;
}
 

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-sortable-component/dist/react-sortable-component.css">
<script src="path/to//react-sortable-component/dist/react-sortable-component.js"></script>

var SortableItems = window.ReactSortableComponent.SortableItems;
var SortableItem = window.ReactSortableComponent.SortableItem;

Props

SortableItems

Name	Type	Required	Default	Description
name	string	true
rootComponentType	string or ReactClass	false	div	EX: ul
children	node	true		List of SortableItem
items	array	false		List item need sort.
sort	function	false	See
onSort	function(arg)	false		Callback when items sorted. If items prop is defined then arg is sorted items else arg is list index of sorted items.
className	string	false		Your custom class name.

SortableItem

Name	Type	Required	Default	Description
rootComponentType	string or ReactClass	false	div	EX: li
children	node	true		Sortable item content.
draggable	bool	false	true
className	string	false		Your custom class name.

Example

View demo or example folder.