React Orderable

DEPRECATED - Recommend https://github.com/clauderic/react-sortable-hoc instead!

Checklist before 0.2.0 release

• Improve demo page (add examples of different kinds of uses)
• Make demo page responsive
• The example code should be directly usable. There are pieces missing right now.

Demo

Try it

Features

• Horizontal or vertical layout
• Drag handle
• Animation
• Ghost item
• Item movement is constrained to a single axis (x or y)
• Touch support

Usage

import 'babel-polyfill'; // Orderable requires an ES6 polyfill
import 'react-orderable/react-orderable.css';
import Orderable from 'react-orderable';
import React from 'react';

// ...

<Orderable
  animated
  className={styles.songs}
  ghost
  itemSize={90}
  onChange={this.handleChange}
>
  {songs.map(song => {
    return (
      <Song
        className={styles.song}
        id={song.get('name')}
        key={song.get('name')}
        song={song}
      />
    );
  })}
</Orderable>

Full example

Orderable interface

| Property | Required | Default | Description | | --- | --- | --- | --- | | animated | N | false | Whether to animate item position during a drag | | children | N | | The items to order | | className | N | | Class name for the Orderable component's div | | ghost | N | false | Whether to show a ghost item when an item is being dragged | | horizontal | N | false | Whether this is a horizontal or vertical list | | itemSize | Y | | Item height for vertical lists, item width for horizontal lists | | onChange | Y | | Callback that receives an ordered array of item ids when a drag completes |

Items inside an Orderable must have an id property (similar to key) which is used to keep track of item order.

Item interface

These are the props the item component must support.

| Property | Required | Description | | --- | --- | --- | | className | Y | Class name for the item's div | | dragging | N | Whether this item is being dragged | | ghost | N | Whether this is a ghost item | | onDragStart | Y | Mouse down or touch start handler for the item's handle (this can be the item itself) | | style | Y | Style for the item's div |

Candidates for improvements

• Variable item size
• Item size from element bounds
• If I have variable item size, do I support changing item size during a drag?
• Margin between items
• Dragging items between groups
• Touch cancel