Skip to content
This repository has been archived by the owner on May 21, 2024. It is now read-only.

klaseskilson/react-sortable

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Sortable

** VERY MUCH WORK IN PROGRESS **

The nested demo is not working on this repo, feel free to fork and fix!

A React component and mixin for creating sortable interfaces utilizing the HTML5 drag & drop API.

Mainly tested in latest stable Webkit and Firefox releases.

Check out http://webcloud.se/react-sortable or the index.html file of this repository for an example implementation.

For nested sortable data structures: Take a look at http://webcloud.se/react-sortable/nested.html or the nested.html file. This implementation is still highly experimental.

Get started

After cloning the directory run bower install to get the react dependencies. Spin up a local webserver serving the project directory (for instance, python -m http.server if you have Python 3.X installed, or python -m SimpleHTTPServer with Python 2.X) and open it in your browser.

Example implementation

Here's a sample implementation using the react-sortable mixin.

/** @jsx React.DOM */

var SortableListItem = React.createClass({
  mixins: [Sortable],
  render: function() {
    return (
      <li {...this.props} className={this.isDragging() ? "dragging" : ""}>{this.props.item}</li>
    );
  }
})

var App = React.createClass({

  getInitialState: function() {
    return {data: this.props.data};
  },

  sort: function(items, dragging) {
    var data = this.state.data;
    data.items = items;
    data.dragging = dragging;
    this.setState({data: data});
  },

  render: function() {

    var listItems = this.state.data.items.map(function(item, i) {
      return (
        <SortableListItem
          sort={this.sort}
          data={this.state.data}
          reactKey={i}
          item={item} />
      );
    }, this);

    return <ul>{listItems}</ul>
  }
});

Here's some example data and a render call to the above component

/** @jsx React.DOM */
var data = {
  items: [
    "Gold",
    "Crimson",
    "Hotpink",
    "Blueviolet",
    "Cornflowerblue",
    "Skyblue",
    "Lightblue",
    "Aquamarine",
    "Burlywood"
  ]
};
React.renderComponent(
  <SortableList data={data} />,
  document.body
);

How it works

The Sortable mixin will automatically attach the necessary drag event handlers providing you render your item with {...this.props}.

The Sortable mixin expects the following properties to be defined on your Sortable Item components:

  • sort (the method that will be called when an item is moved)
  • data (the complete list being sorted)
  • reactKey (key is no longer available on this.props since React 12.0)
  • item (The item itself)

About

A sortable list component built w/ React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 73.6%
  • HTML 17.0%
  • CSS 9.4%