react-anything-sortable
v1.7.4
Published
A ReactJS component that can drag and sort any children with IE8 compatibility
Downloads
4,108
Maintainers
Readme
This project is in INACTIVE status, bugfix will be maintained, but no new feature will be added. Feel free to use it if it suits your need, for complicated sorting features I'd recommend react-dnd by dan.
react-anything-sortable
Features
- Sort any React element you like, images, composite components, etc.
- No external dependencies but
React
itself - Touch event support
- Thoroughly tested
Quick Demo
Sort custom style children
Sort images
Children with custom event handler
Installation
$ npm install --save react-anything-sortable
// UMD build is provided as well, but please do consider use modern module bundlers like webpack or browserify.
You have to add necessary styles for sortable to work properly, if you're using bundle tools like webpack, just
import 'react-anything-sortable/sortable.css';
Or copy this css to your own style base.
How to use
You can check the straight-forward demo by examining demo
folder, or here's a brief example.
In app.js
var ReactDOM = require('react-dom');
var Sortable = require('react-anything-sortable');
var SortableItem = require('./SortableItem');
ReactDOM.render(
<Sortable onSort={handleSort}>
<SortableItem sortData="1" />
<SortableItem sortData="2" />
</Sortable>
, document.body);
and in SortableItem.js
A modern usage would be
import React from 'react';
import { SortableContainer } from 'react-anything-sortable';
@sortable
class SortableItem extends React.Component {
render() {
return (
<SortableContainer>
<div>
your item
</div>
</SortableContainer>
);
}
};
Or you want to construct it manually
import React from 'react';
import { sortable } from 'react-anything-sortable';
@sortable
class SortableItem extends React.Component {
render() {
return (
<div // <-- make sure pass props to your own item,
className={this.props.className}
style={this.props.style}
onMouseDown={this.props.onMouseDown}
onTouchStart={this.props.onTouchStart}
>
your item // it contains required `className`s and
</div> // event handlers
);
}
};
Or if you favor the old fashion way
var React = require('react');
var createReactClass = require('create-react-class');
var SortableItemMixin = require('react-anything-sortable').SortableItemMixin;
var SortableItem = createReactClass({
mixins: [SortableItemMixin],
render: function(){
return this.renderWithSortable( // <-- this.renderWithSortable call is essential
<div>your item</div>
);
}
});
You can even pass un-sortable children to <Sortable />
and it just works, checkout this demo to find out more. If you do so, remember to add according style to your un-sortable items.
Props
onSort
Type: Function Default: () => {}
Being called with sorted data when a sort operation is finished.
Arguments
- sortedArray (Array) Sorted array consists of
sortData
plucked from each sortable item - currentDraggingSortData (Any) The sortData of dragging element
- currentDraggingIndex (Number) The index of dragging element
containment
Type: Bool Default: false
Constrain dragging area within sortable container.
dynamic
Type: Bool Default: false
Dynamically update the sortable when its children change. If using this option, make sure to use the onSort callback to update the order of the children passed to the Sortable component when the user sorts!
sortHandle
Type: String Default: undefined
A className to allow only matching element of sortable item to trigger sort operation.
sortData
Add this props to SortableItem
rather than Sortable
!
Type: Any Default: undefined
Will be returned by onSort
callback in the form of array.
direction
Type: String Default: false Options: vertical, horizontal
Will force dragging direction to vertical or horizontal mode.
Notice
- Specify your style for
Sortable
andSortable Items
, checksortable.css
, it is NOT optional! - Don't forget the
this.renderWithSortable
call inSortableItem
, or spread props to your component if using decorators. - In order to dynamically add or remove
SortableItem
s or change their order from outside theSortable
, you must use thedynamic
option. This also requires using theonSort
callback to update the order of the children when sorting happens. - Make sure to add
draggable={false}
to images within sortable components to prevent glitching. See here for an example.
Scripts
$ npm run test
$ npm run watch
$ npm run build
$ npm run demo
$ npm run demo:watch