https://github.com/zooniverse/drag-reorderable
https://github.com/zooniverse/drag-reorderable
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zooniverse/drag-reorderable
- Owner: zooniverse
- Created: 2015-09-25T23:05:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T11:13:10.000Z (about 2 years ago)
- Last Synced: 2024-04-29T12:31:22.745Z (about 2 years ago)
- Language: JavaScript
- Size: 21.5 KB
- Stars: 3
- Watchers: 10
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DragReorderable
This is a React component for simple reordering of items in an array.
It takes the following props:
* `tag`: The container tag to render. Defaults to `"div"`.
* `items`: The array of items you want to be reorderable.
* `render`: The function to render each item. It should return a React element. Make sure it's got a `key` prop!
* `onChange`: The function to call when an item has been successfully dragged and dropped.
`display: block` elements can be dragged vertically, `inline` elements horizontally.
While dragging, the root document element will get a `data-drag-reorderable-dragging` attribute, the container will get a `data-dragging` attribute, and the item being dragged will get a `data-being-dragged` attribute.
## Example
http://zooniverse.github.io/drag-reorderable/example.html
```jsx
const Whatever = React.createClass({
getInitialState() {
return {
things: [
{id: 0, content: 'Hello'},
{id: 1, content: 'World'},
{id: 2, content: 'Hola'},
{id: 3, content: 'Mundo'}
]
};
},
render() {
return (
};
},
renderThing(thing) {
return (
The thing is: {thing.content}.
);
},
handleThingsReorder(newThings) {
this.setState({
things: newThings
});
}
});
```
## TODO:
* Tests!
* Touch event handling