A ReactJS component that can drag and sort any children with IE8 compatibility
npm install react-anything-sortableThis 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.
-----
- Sort any React element you like, images, composite components, etc.
- No external dependencies but React itself
- Touch event support
- Thoroughly tested
Sort custom style children
Sort images
Children with custom event handler
``
$ 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
`javascript`
import 'react-anything-sortable/sortable.css';
Or copy this css to your own style base.
You can check the straight-forward demo by examining demo folder, or here's a brief example.
In app.js
``javascript
var ReactDOM = require('react-dom');
var Sortable = require('react-anything-sortable');
var SortableItem = require('./SortableItem');
ReactDOM.render(
, document.body);
``
and in SortableItem.js
A modern usage would be
`javascript
import React from 'react';
import { SortableContainer } from 'react-anything-sortable';
@sortable
class SortableItem extends React.Component {
render() {
return (
your item
);
}
};
`
Or you want to construct it manually
`javascript
import React from 'react';
import { sortable } from 'react-anything-sortable';
@sortable
class SortableItem extends React.Component {
render() {
return (
s and
Or if you favor the old fashion way
javascript
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
your item
);
}
});
``You can even pass un-sortable children to
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
$3
Type: Function Default: () => {}
Being called with sorted data when a sort operation is finished.
Arguments
1. sortedArray (Array) Sorted array consists of
sortData plucked from each sortable item
2. currentDraggingSortData (Any) The sortData of dragging element
3. currentDraggingIndex (Number) The index of dragging element$3
Type: Bool Default: false
Constrain dragging area within sortable container.
$3
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!
$3
Type: String Default: undefined
A className to allow only matching element of sortable item to trigger sort operation.
$3
Add this props to
SortableItem rather than Sortable !Type: Any Default: undefined
Will be returned by
onSort callback in the form of array.$3
Type: String Default: false
Options: vertical, horizontal
Will force dragging direction to vertical or horizontal mode.
Notice
1. Specify your style for
Sortable and Sortable Items, check sortable.css, it is NOT optional!
2. Don't forget the this.renderWithSortable call in SortableItem, or spread props to your component if using decorators.
3. In order to dynamically add or remove SortableItems or change their order from outside the Sortable, you must use the dynamic option. This also requires using the onSort callback to update the order of the children when sorting happens.
4. 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
1. stayradiated
2. vizath
3. zthomas
4. jakubruffer
5. Fabeline
6. antialiasis
7. JasonKleban