1.0.0 • Published 8 years ago
react-sortable-component v1.0.0
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.