https://github.com/hulufei/react-sortable-mixin

Make a list-like react component sortable
https://github.com/hulufei/react-sortable-mixin

Last synced: 18 days ago
JSON representation

Make a list-like react component sortable

• Host: GitHub
• URL: https://github.com/hulufei/react-sortable-mixin
• Owner: hulufei
• License: mit
• Created: 2014-11-19T14:52:21.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-02-12T07:11:32.000Z (almost 5 years ago)
• Last Synced: 2024-10-13T18:32:02.540Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 318 KB
• Stars: 25
• Watchers: 4
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-sortable-mixin

====================

A mixin for React to creat a sortable(drag and move) List Component.

[Demo](http://hulufei.github.io/react-sortable-mixin/demo/)

## Install

`npm install --save-dev react-sortable-mixin`

## Usage

- Define a List Component use `ListMixin` contains Item Components use `ItemMixin`.

- List Component required state `items` to set items' data.

- Item Component required props:

  [`key`](http://facebook.github.io/react/docs/reconciliation.html) / `index` / [`movableProps`](http://facebook.github.io/react/docs/transferring-props.html).

That's it!

Example code:

```javascript

var React = require('react');

var sortable = require('react-sortable-mixin');

// Item Component use `ItemMixin`

var Item = React.createClass({

  mixins: [sortable.ItemMixin],

  render: function() {

    return 
item {this.props.item}
;

  }

});


// List Component use `ListMixin`

var List = React.createClass({

  mixins: [sortable.ListMixin],

  componentDidMount: function() {

    // Set items' data, key name `items` required

    this.setState({ items: this.props.items });

  },

  render: function() {

    var items = this.state.items.map(function(item, i) {

      // Required props in Item (key/index/movableProps)

      return ;

    }, this);

    return 
{items}
;

  }

});


module.exports = List;

```

## Hook Events (On List)

- `onMoveBefore`: after `mousedown` before `mousemove`

- `onResorted`: if items not resorted (drop at same position) will not trigger

- `onMoveEnd`