jasonslyvia/react-anything-sortable

A ReactJS component that can sort any children with touch support and IE8 compatibility

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

Live 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

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

containment

Type: Bool Default: false

Constrain dragging area within sortable container.

demo

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!

demo

sortHandle

Type: String Default: undefined

A className to allow only matching element of sortable item to trigger sort operation.

demo

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

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

Contributors

1. stayradiated
2. vizath
3. zthomas
4. jakubruffer
5. Fabeline
6. antialiasis
7. JasonKleban

react-anything-sortable's Issues

No rendering when sort-items are asynchronously fetched

I'm fetching my sortable items asynchronously via fetch. Unfortunately they are not rerendered after the state has been updated when inside a Sortable-component.

Items not in a "Sortable"-component are rendered just fine:

Here's an example based on Demo vertically sorting:

import React from 'react';
import Sortable from 'react-anything-sortable';
import DemoHOCItem from '../components/DemoHOCItem.js';

export default class Vertical extends React.Component {
  constructor() {
    super();
    this.state = {
      items: ['four','five','six']
    };
  }

 componentDidMount() {
    console.log('Loading Route Sequences from server')
    fetch('http://uberfl.us/sortable.json')
    .then(
      response => {
        return response.json()
      }
    )
    .then(
      items => {
        this.setState(items)
        console.log(items)
      }
    )
  };

  render() {
    function renderWithSortable(renderItem, index) {
      return (
        <DemoHOCItem className="vertical" sortData="renderItem" key={index}>
          {console.log('rendering items')}
          {renderItem+' sortable'}
        </DemoHOCItem>
      );
    }

     function renderWithoutSortable(renderItem, index) {
      return (
        <DemoHOCItem className="vertical ui-sortable-item" key={index}>
          {console.log('rendering without sortable')}
          <div className='vertical ui-sortable-item'>
          {renderItem+' not sortable'}</div>
        </DemoHOCItem>
      );
    }

    return (
      <div className="demo-container">
         <Sortable className="vertical-container" direction="vertical">
          {this.state.items.map(renderWithSortable, this)}
        </Sortable>
        <br/>
       <div className="vertical-container">
          {this.state.items.map(renderWithoutSortable, this)}
        </div>
      </div>
    );
  }
}

How to keep an item at a fixed position in a Sortable list?

I have a Sortable list where I want between each SortableItem to be a fixed item (it happens to be an arrow glyphicon, but that's besides the point).

class SortableExample extends React.Component {
  _handleSort(data) {
    console.log(data);
  }

  render() {
    return (
      <Sortable onSort={this._handleSort.bind(this)}>
        <SortableItem className="item-1" sortData="react" key={1}>
          React
        </SortableItem>
        <FixedItem style={{float: 'left'}} />
        <SortableItem className="item-2" sortData="angular" key={2}>
          Angular
        </SortableItem>
        <FixedItem style={{float: 'left'}} />
        <SortableItem className="item-3" sortData="backbone" key={3}>
          Backbone
        </SortableItem>
      </Sortable>
    );
  }
}

In my attempt, if I try to sort the data, the FixedItems get pushed to the outside (FixedItems do not have the @sortable decorator/mixin), and the handlesort method receives [undefined, "angular", "backbone","react",undefined]. However If I go into browser devtools and move the FixedItem DOM nodes back into position, they remain fixed where they're supposed to.

Would would be the simplest way to keep these items fixed while keeping them at the same sibling level as the SortableItems?

Not working in touch enabled deviced

This is not working in chrome. No elements are being dragged. I'm using Chrome v46.
I also tested it on firefox. It is working there.

Flicking when dragging final Items

In the demo, there is a small glitch/flicking of the first item when you drag the last item.

Maybe the first items are being unnecessarily rendered?

ie8下，会报出“类型不匹配”的错误

如题，在ie8下引用会报出“类型不匹配”的错误。

我跟进了一下，发现off方法传入的callback有时为空，有可能是这个原因引起的。
http://stackoverflow.com/questions/31971004/ie8-compatibility-mode-type-mismatch-detachevent

Problem with Contenteditable div

I'm in a situation where I need to render a contenteditable div.

So, just tried it by adding contenteditable div in demoItem.js. Then, whenever I click inside the div, cursor focuses at starting point of the text, not at the place where I clicked.

Please help me out.

Doesn't work with mapped SortableItems

This works:

render() {
  return <Sortable>
      <DemoHOCItem className="item-1" sortData="react" key={1}>
        React
      </DemoHOCItem>
     <DemoHOCItem className="item-2" sortData="angular" key={2}>
        Angular
      </DemoHOCItem>
    </Sortable>
}

This doesnt:

function renderItem(n, index) {
return <DemoHOCItem
      className={'item-' + index}
      sortData={n}
      key={index}>{n}</DemoHOCItem>
}

render() {
  return <Sortable>
     {items.map(renderItem)}
 </Sortable>
}

And by doesn't work, I mean nothing is rendered within sortable.

If I render the {items.map(renderItem)} outside of <Sortable>, it works...

Very odd.

Request - interactive demo

I've been trying to figure out which library I might use for this functionality, but most of them have issues on touch screens. An interactive demo will help folks choose the right library.

Bower package

Would love to be able to use this package via Bower.

Work with React v0.14

@adampash made a brilliant pr for React v0.14 support, but since 54a113c introduced a bit of modification, maybe a corresponding upgrade is needed too.

Limit Draggable Area

Is it possible to limit the area that an user can drag an item? It would be nice to define boundaries in which you could drag an item.

Is this in your plans? Is it difficult to add support for this?

Drag handle

Is it possible to add an ability to mark a drag handle inside of sortable item? This will allow to sort list only by dragging item with the handle, but not the whole item.

Error bundling with browserify

I'm trying to include react-anything-sortable with an existing component that uses browserify. I'm getting the following error when trying to render the component:

Uncaught Error: Cannot find module "react-dom"

I then tried to create a clean project, however the problem still persisted, and after doing some digging I found that this is triggered from this code in the generated bundle.js:

var _reactDom = __webpack_require__(!(function webpackMissingModule() { 
  var e = new Error("Cannot find module \"react-dom\""); 
  e.code = 'MODULE_NOT_FOUND'; 
  throw e; 
}()));

I suspect that maybe it has something to do how webpack bundles the js. Do you have any clue of what might be the issue here? The example is I used is straightforward:

• package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "Testing react sortable",
  "main": "src/index.js",
  "scripts": {
    "build": "browserify --transform [browserify-shim --global=true] --transform [reactify --global=true] -s __ModuleExport__ src/index.js -o dist/bundle.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "hfcorreia",
  "license": "MIT",
  "devDependencies": {
    "browserify": "^9.0.3",
    "reactify": "^1.0.0",
    "browserify-shim": "~3.8.10"
  },
  "browserify-shim": {
    "react": "global:React",
    "react/lib/ReactDOM": "global:React"
  },
  "browserify": {
    "transform": [
      "reactify",
      "browserify-shim"
    ]
  },
  "dependencies": {
    "react": "^0.14.3",
    "react-anything-sortable": "^1.1.1",
    "react-dom": "^0.14.3"
  }
}

• List.js

var React = require('react'),
  Item = require('./Item.js'),
  Sortable = require('react-anything-sortable');

var List = React.createClass({
  render: function() {
    return (
      <Sortable>
        <Item sortData="1">One</Item>
        <Item sortData="2">Two</Item>
        <Item sortData="3">Three</Item>
      </Sortable>
    )
  }
});

module.exports = List;

• Item.js

var React = require('react');
var SortableItemMixin = require('react-anything-sortable').SortableItemMixin;

var Item = React.createClass({
  mixins: [SortableItemMixin],

  render: function(){
    return this.renderWithSortable(
      <div>{this.props.children}</div>
    );
  }
});

module.exports = Item;

Dependencies problem

I am getting this error while installing react-anything-sortable
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
I have react 0.14.0 installed in my project directory.

Can't use cmd+a inside a sortable component

I have a textarea inside a component wrapped by @sortable and I can't use the cmd+a (which is supposed to "Select All" text inside the textarea). Removing the @sortable decorator fixes the cmd+a. I'm guessing sortable is preventing some keyboard events.

direction="vertical" on <Sortable> not working and <Sortable> in overflow:scroll buggy?

Hi Jason,

The direction="vertical" on my code doesn't seem to work in my code. However containment: true works, the only bug is when the parent container has a overflow: scroll.

Here's a simplified test case of how I'm implementing my code and also an "almost" carbon-copy code of your "vertical" demo.

App.js

import React from 'react';
import Sortable from 'react-anything-sortable';
import { sortable } from 'react-anything-sortable';

@sortable
class WidgetListItem extends React.Component {
    render() {
        return (
            <div {...this.props}>
                {this.props.children}
            </div>
        )
    }
}

export default class WidgetList extends React.Component {
    constructor() {
        super();
        this.state = {};
    }

    handleSort(data) {
        this.setState({
            result: data.join(' ')
        });
    }

    toggleCheckbox(evt) {
        console.log(evt)
    }

    render() {
        let items = [1,2,3,4,5,6,7,8,9,10]
        // TODO: move widget creation to its own component <WidgetItem/>
        const widgetItems = items.map(i => {
            return (
                <WidgetListItem className="vertical" sortData={i} key={i}>
                    Widget {i}
                </WidgetListItem>
            )
        })
        return <div>
                <h1>React Sortable Test</h1>
                <Sortable onSort={::this.handleSort} containment="true" className="vertical-container" direction="vertical">
                    {widgetItems}
                </Sortable>
        </div>
    }
}

/* pre-built style */
.ui-sortable {
  display: block;
  position: relative;
  overflow: visible;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.ui-sortable:before,
.ui-sortable:after{
  content: " ";
  display: table;
}

.ui-sortable:after{
  clear: both;
}

.ui-sortable .ui-sortable-item {
  float: left;
  cursor: move;
}

.ui-sortable .ui-sortable-item.ui-sortable-dragging {
  position: absolute;
  z-index: 1688;
}

.ui-sortable .ui-sortable-placeholder {
  display: none;
}

.ui-sortable .ui-sortable-placeholder.visible {
  display: block;
  z-index: -1;
}

/*custom*/
.vertical-container {
  width: 200px;
  padding: 10px;
  border: 1px #ccc solid;


  height:150px;
  overflow: scroll;
}

.vertical.ui-sortable-item {
  float: none;
  display: block;
  width: 100%;
  padding: 10px 5px;
  margin-bottom: 10px;
  border: 1px #eee solid;
}

It's weird that the direction="vertical" works for on your GitHub demo, but not on mine (maybe only doesn't work for me?)

Vertical demo doesn't appear to use "direction: vertical"

https://github.com/jasonslyvia/react-anything-sortable/blob/master/demo/pages/vertical.js

I am not sure what the desired behavior is here, but it doesn't seem like the demo conforms to the docs:

It appears maybe this is the code for the "Using decorators" example

Cheers,
Thomas

Uncaught TypeError: type.toUpperCase is not a function

Am trying to use react-anything-sortable in my project and having some difficulty ,
I followed all the steps listed on https://www.npmjs.com/package/react-anything-sortable but getting following error

"Uncaught TypeError: type.toUpperCase is not a function" in following method of react/addons at line javascript tagName: type.toUpperCase(). Works great in demo which uses import instead of require for react and SortableItemMixin dependencies

function autoGenerateWrapperClass(type) {
  return ReactClass.createClass({
    tagName: type.toUpperCase(),
    render: function() {
      return new ReactElement(
        type,
        null,
        null,
        null,
        null,
        this.props
      );
    }
  });
}

I did update Demo on my local to reproduce the issue

file : demo/index.js

var React = require('react/addons');
var Sortable = require('../lib/index.js');
var SortableItem = require('./SortableItem.js');


React.render(
  <Sortable onSort={handleSort} className="style-for-test">
                <SortableItem className="item-1" sortData="1" key={1}>
                Item1
                </SortableItem>
                <SortableItem className="item-2" sortData="2" key={2}>
                Item2
                </SortableItem>
                <SortableItem className="item-3" sortData="3" key={3}>
                Item3
                </SortableItem>
            </Sortable>
, document.getElementById('react'));

function handleSort(data){
  document.getElementById('result').innerText = data.join(' ');
}

file : demo/SortableItem.js

var React = require('react/addons');

var SortableItemMixin = require('../lib/index.js').SortableItemMixin;

var SortableItem = React.createClass({

   mixins: [SortableItemMixin],

      render:function() {

    return this.renderWithSortable(
      <div className={this.props.className}>
        {this.props.children}

      </div>
    );
  }
});
module.exports = SortableItem;

React can't find the root component node for data-reactid value `.5`.

Only after loading your component I get React can't find the root component node for data-reactid value .5.

Loading via requirejs data-main attribute.

Text in dragging state

I am trying to drag textareas with text in them. When I drag them, the text areas are dragged, but the text is not.
How can I show the text in the textarea in dragging state?

Need to disable default scrolling for touch based mobile devices

On the demo you can see that if you drag and sort an item vertically it triggers the native scrolling behaviour making it completely unusable.

I have a PR for a simple fix.
#32

outerWidth and outerHeight include margins

Maybe it's more a question than a bug

When draggable element is cloned, outerWidth and outerHeight of the new element include the margins of the original element. I have margins between my items. So when I drag one element it becomes big and ugly.

Why did you choose to use outerWidth with margins? Is it by design or to fix quirks of bad browsers?

I experience it in Chrome, Safari, Firefox and IE8 on XP.

Can I help improve it?

Modern usage of sortable is not working for me

I have changed the DemoItem.js as follows:

import React from 'react';
import { sortable } from '../../src/index.js';

@sortable
class DemoItem extends React.Component {
  render() {
    return (
      <div className={this.props.className}>
        {this.props.children}
      </div>
    );
  }
};

export default DemoItem;

The above one doesn't work for me. Please correct me if I'm doing something wrong.

Error on drag when sortHandle contains an SVG

My sortHandle is a span containing an SVG icon, but when I try to drag on it, I get this error: Uncaught TypeError: e.target.className.indexOf is not a function

The culprit is this line; for an SVG, the className is not a string but an SVGAnimatedString object, which does not have an indexOf property. This case should probably be handled somehow.

when dynamically add new SortableItem, the page did not show the new item

Can not sort item with state

eg:
return this.renderWithSortable(

{this.state.sheetName}

);

Like this, sort is not working

Disabled Property

Why don't you have a property that is able to disable the sortable element? sometimes you have so many elements on the screen and then scrolling on a mobile device becomes impossible, it'll be good to just be able to disable the sorting as needed.

onSort passed in the sortData of the item that was moved

Sorry, saw you were working on the library right now so figured I'd ask if you have any clue what could be causing this. I'm using React 0.14.1. The error happens inside require('react-anything-sortable').

window.ReactDOM = require('react-dom');
var SortableMixin = require('react-anything-sortable').SortableItemMixin;

Thanks

getComputedStyle is not defined

Hi, when I use shallow render to test my react component, it show getComputedStyle is not defined.

And I find it doesn't define at /src/utils.js#L55.

"Warning: Unknown props `sortData`, `onSortableItemMount`..." on initial render with React 1.5.2

I've upgraded from Babel 5 to Babel 6 and transpile the vertical-demo with the help of "transform-decorators-legacy"-plugin (Babel 6 currently does not support decorators):

import React from 'react';
import Sortable from 'react-anything-sortable';
import { sortable } from 'react-anything-sortable';

@sortable
class DemoHOCItem extends React.Component {
  render() {
    return (
      <div {...this.props}>
        {this.props.children}
      </div>
    );
  }
}

export default DemoHOCItem;

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      items: ['four','five','six']
    };
  }

render() {
    function renderWithSortable(renderItem, index) {
      return (
        <DemoHOCItem className="vertical" sortData="renderItem" key={index} dynamic>
          {console.log('rendering with sortable')}
          {renderItem+' sortable'}
        </DemoHOCItem>
      );
    }

    return (
      <div className="demo-container">
         <Sortable className="vertical-container" direction="vertical">
          {this.state.items.map(renderWithSortable, this)}
        </Sortable>
      </div>
    );
  }
};

export default Test;

On the initial rendering of <DemoHOCItem/> I get this warning:

main.js:28024 Warning: Unknown props `sortData`, `onSortableItemMount`, `onSortableItemReadyToMove`, `sortable`, `sortHandle` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by DemoHOCItem)
    in DemoHOCItem (created by SortableItem)
    in SortableItem (created by Test)
    in div (created by Sortable)
    in Sortable (created by Test)
    in div (created by Test)
    in Test (created by RoutingContext)
    in div (created by App)
    in App (created by RoutingContext)
    in RoutingContext (created by Router)
    in Router

also when dragging an sortable item for the first time:

main.js:28024 Warning: Unknown prop `isDragging` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by DemoHOCItem)
    in DemoHOCItem (created by SortableItem)
    in SortableItem (created by Test)

Subsequent renderings (Without reloading the app) no longer produce warnings, so the sortable-module works despite the warnings.

I figured the issue is with the aforementioned babel-plugin, and filed a bug report, but the author thinks it's rather related to react-sortable-anything:

Have you filed this issue with that module? It seems more likely to be that they are passing the props down into the child component incorrectly somewhere.

SortableContainer is not exported

I am trying to use the container based approach described in the README, yet the module does not seem to export the required <SortableContainer /> component.

I am trying the following:

import React from 'react';
import {SortableContainer} from 'react-anything-sortable';

export const Item = ({
    thing
}) => (
    <SortableContainer sortData={thing}>
        <li className='list-item'>
            {thing}
        </li>
    </SortableContainer>
);

but SortableContainer is undefined.

When I iterate over the keys of the default export I get:

"displayName", "propTypes", "SortableItemMixin", "sortable"

so it looks like it's not being exported.

The weird thing is that looking at the files installed into my node_modules the file that main points to does not say anything about a SortableContainer:

frederik@thinkpad[lib](some-branch) $ cat index.js | grep SortableContainer
frederik@thinkpad[lib](some-branch) $ 

The version I installed is 1.5.2

Drag into other Sortable divs

I'm wondering if you have tried to get react-anything-sortable to work with multiple target Sortable divs.

My specific use case is that I want to be able to drag items to re-order within a list, but also have the ability to drag the items into labels/buckets.

warning.js:45 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Sortable component.

Just cloned the repo and ran

1. npm install,
2. npm demo:watch

After I drag and drop an item I get this warning.

Does SortableItem support high order component?

I read the doc, looks only can use ES5 mixins.

var SortableItem = React.createClass({
  mixins: [SortableItemMixin],

  render: function(){
    return this.renderWithSortable(
      <div>your item</div>
    );
  }
});

Does it support ES6 class? like below:

@sortable
class ContentOrgEditor extends Component {
  render: function() {
    return this.renderWithSortable(
      <div>your item</div>
    )
  }
}

onMouseUp issue when clicked on draggable

The following line prevents handling onMouseUp when draggable element is clicked: https://github.com/jasonslyvia/react-anything-sortable/blob/master/Sortable.jsx#L143

For example we have a button on a draggable element. When button is pressed, pop-up appears. With that line, handleMouseUp returns on click (because mouse is not moving). So dragging is never cancelled.

I am not sure whether it's a bug or a feature. But if you consider this a feature, maybe you could make it a preference?

Errors when using in browserify

I'm getting the following compile error when I try to use this with browserify:
Cannot find module 'babelify' from '/Users/juliiankrispel/projects/Rainforest/node_modules/react-anything-sortable

Demo broken ??

Nothing is happening

Server side render is different from the client side one

warning.js:45 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) ned ui-sortable-item undefined false" da
 (server) ned ui-sortable-item

I'm guessing this has something to do with bindEvent or componentDidUpdate since document is used.

I'm getting Uncaught TypeError: type.toUpperCase is not a function error

I'm getting Uncaught TypeError: type.toUpperCase is not a function error when trying to implement react-anything-sortable.

var React = require('react');
var Sortable = require('react-anything-sortable');
var SortableItemMixin = require('react-anything-sortable').SortableItemMixin;

var Item = React.createClass({
  mixins: [SortableItemMixin],
  render: function(){
    return this.renderWithSortable(
      <div>your item</div>
    );
  }
});

function handleSort(data){
  document.getElementById('result').innerText = data.join(' ');
}

React.render(
    <Sortable onSort={handleSort}>
        <Item sortData="0"></Item>
        <Item sortData="1"></Item>
    </Sortable>
    , document.body
);

Uncaught TypeError: type.toUpperCase is not a function
autoGenerateWrapperClass @ ReactDefaultInjection.js:53
getComponentClassForElement @ ReactNativeComponent.js:59
validatePropTypes @ ReactElementValidator.js:361
ReactElementValidator.createElement @ ReactElementValidator.js:408
1.react @ main.js:19
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous function) @ _prelude.js:1

use callbackfunction to set father's state, dragEvent doesn't work

In father:

sortCallback( data ) {
let { sortModal } = this.state
sortModal.sortList = data
console.log( sortModal )
// this.setState({
// sortList: data
// })
}
<SortItemList key={new Date().getTime()} data={imgList} sortCallback={this.sortCallback} />

In self:

handleSort( data ) {
const { sortCallback } = this.props
if( sortCallback ){
sortCallback( data )
}
}

{this.state.result}

{itemList}

when I want setState in sortCallback(), the sortEvent doesn't work, when I remove setState, It work well

Thank you! My English is poor.......

Ability to sorting with dynamic SortableItem

Sometimes, we not only sort the items but also wants add/remove items dynamically.
I think this feature is useful for some scenario, e.g. a todolist app.

I would be grateful to you if you could consider this request.

---

I have notice this issue seems duplicated with #6
The given workaround that set the key property of Sortable, but it is inconvenience in some case.

If I sort the list [a,b,c,d] => [a,c,b,d]
and append a element 'e' to the list
the list will be rendered as [a,b,c,d,e] because of the was _orderArr reset
certainly, I can sort the list by sortData before list.length changed to workaround this.
But I still wonder what is the better way to solve this problem.

Effects?

It's possible to add some effects to make it smoother ?

Readme: remove sortHandleClass

There's a mention of sortHandleClass in readme and tests, but it doesn't appear in your code. I'm assuming you changed the name to sortHandle and forgot to update the readme and tests.

Cannot read property 'firstChild' of undefined

We are facing this issue when we have added this plugin. When we remove this plugin, it is working fine. On search, we can notice that it happens because of multiple reactjs versions.
http://stackoverflow.com/questions/27153166/typeerror-when-using-react-cannot-read-property-firstchild-of-undefined
In bower.json, we can see this, is it the source of the issue?

"dependencies": {
    "react": "*"
  }

Also, we are using react version 0.13.3, react-anything-sortable 0.3.2
Thanks in Advance!

Allow the number of elements to change overtime

Is it possible to update the items that can be sortable at runtime ?
For example, a button that add an element to be ordered.

It doesn't seem possible, since _dimensionArr and _orderArr are set only in getInitialState() and every operation seem to be based on their indexes.

Thanks.

The suggested solution for dynamic children involving changing the key of the Sortable component is less than ideal

Hello. I've got some sortable items that perform some work on componentDidMount that may change their dimensions. I am also dynamically adding and removing sortable items, as well as changing their order by other means than dragging, so I have been using the recommended solution of giving the Sortable component a key and incrementing it whenever the items change.

However, this means that React will unmount and remount the entire list every time I sort - which leads to those elements rerunning their componentDidMount, performing a bunch of unnecessary work and to boot changing their dimensions, causing jank. In general, this definitely doesn't seem like an ideal solution - it'd also mean uncontrolled inputs getting cleared, etc. Is there no better way to update the item list than the key hack?

Class 'ui-sortable-item' not being added when using <SortableContainer>

Trying to set up react-anything-sortable and can't figure out why it isn't working. All I can tell is that 'ui-sortable-item' isn't being added to the sortable item divs. Am I missing some kind of prop?

// SortableCategoryList.js
import CategoryListing from 'app/components/CategoryListing';
import DirectoryActions from 'app/actions/DirectoryActions';
import React, {Component, PropTypes} from 'react';
import Sortable from 'react-anything-sortable';

function handleOnTouchMove(e) {
  e.stopPropagation();
  e.preventDefault();
}

function handleOnSort(categories) {
  DirectoryActions.setCategoryOrder(categories);
}

export default class SortableCategoryList extends Component {
  static propTypes = {
    categories: PropTypes.array,
  };

  constructor(props) {
    super(props);
    this.renderCategoryListing = ::this.renderCategoryListing;
  }

  _isCategoryChecked() {
    return false;
  }

  renderCategoryListing(category) {
    return (
      <CategoryListing sortData={category} key={category.category_id} checked={this._isCategoryChecked(category)}/>
    );
  }

  render() {
    // const onChange = DirectoryActions.setCategoryOrder;
    if (this.props.categories.length > 0) {
      return (
        <div
          className='sortable-category-list'
          onTouchMove={handleOnTouchMove}
        >
          <Sortable onSort={handleOnSort} containment={true}>
            {this.props.categories.map(this.renderCategoryListing)}
          </Sortable>
        </div>
      );
    }
    return false;
  }
}

// CategoryListing.js
import DirectoryActions from 'app/actions/DirectoryActions';
import React, {Component, PropTypes} from 'react';
import {SortableContainer} from 'react-anything-sortable';

export default class CategoryListing extends Component {
  static propTypes = {
    sortData: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this._handleCheckboxToggle = ::this._handleCheckboxToggle;
  }

  _handleCheckboxToggle(e) {
    DirectoryActions.setCategoryEnabled({
      category_id: this.props.sortData.category_id,
      enabled: e.target.checked,
    });
  }

  render() {
    return (
      <SortableContainer>
        <div>
          <div className="category-listing">
            {this.props.sortData.name}
            <input
              type="checkbox"
              className="right"
              checked={this.props.sortData.checked}
              onChange={this._handleCheckboxToggle}
            />
          </div>
        </div>
      </SortableContainer>
    );
  }
}

drag speed when using css zoom

We are using css zoom to change the dynamically scale down the size of a group of react controls that includes a sortable and sortable items. When doing so, if we drag a control to sort then it will drag at a slower speed then the mouse.

Doesn't playing nicely with redux-form

Hey there,

So I'm trying to use the react-anything-sortable library with redux-form, but I am unfortunately running into issues when trying to do so. It seems that there are two potential issues at play. They can both be seen in the following screenshots where I try to drag and re-order my inserts:
1)

In the screenshot 1, I start to drag the bottom insert. It stops dragging suddenly after a redux-form/Register-Field event is fired. I believe this occurs because of how the react-anything-sortable library works.

After I let go of the mouse, I can continue dragging, and when I try to switch inserts 2 and 3, by dropping, I get this series of redux actions:

Here is what my source code looks like:

<Sortable
              sortHandle={"taHandle"}
              onSort={function (sortedArray,previousIndex,newIndex) {
                inserts.move(previousIndex,newIndex)
              }}
              direction='vertical'
              dynamic
              >
              {
                inserts.map((insert, index) => {
                  return (
                    <SortableWrapperItem key={index} sortData={index}>
                    <Field name={insert} inserts={inserts} key={index} index={index} insertValues={insertValues} component={RenderInsert}/>
                  </SortableWrapperItem>
                )
                })
              }
            </Sortable>

I'm not totally sure why the Field in question is being registered/unregistered, nor why it is "moved" twice. As I alluded to above, I think the sortable wrapper item is maybe removing its children from the dom causing redux-form to fire the unnecessary register/unregister actions and the extra move action. Is that indeed how works?

It would be great if these two libraries could be made to play together nicely in some way. Any ideas as to how to remedy this would be appreciated. I've also posted this issue over at the redux-form repo as well.

Thanks!

Better named HOC export

As I couldn't use mixins initially (see #41) I've been going down the HOC route. I don't use decorators though, so the naming of the export is a bit weird when you use it without them.

I suggest adding another alias for the exported mixin/hoc component:

Sortable.SortableItemMixin = SortableItemMixin(); // Mixin style
Sortable.SortableItemFactory = SortableItemMixin; // HOC style
Sortable.sortable = SortableItemMixin; // Decorator HOC style

which enables a more natural usage without decorators, something like this:

import React from "react";
import Sortable, { SortableItemFactory } from "react-anything-sortable";
import Item from "./item";

const SortableItem = SortableItemFactory(Item);

class SortableExample extends React.Component {
  _handleSort(data) {
    console.log(data);
  }

  render() {
    return (
      <Sortable onSort={this._handleSort.bind(this)}>
        <SortableItem className="item-1" sortData="react" key={1}>
          React
        </SortableItem>
        <SortableItem className="item-2" sortData="angular" key={2}>
          Angular
        </SortableItem>
        <SortableItem className="item-3" sortData="backbone" key={3}>
          Backbone
        </SortableItem>
      </Sortable>
    );
  }
}