jQuery UI Sortable with React.js buggy

The trick is to call sortable('cancel') in the stop event of the Sortable, then let React update the DOM.

componentDidMount() {
    this.domItems = jQuery(React.findDOMNode(this.refs["items"]))
    this.domItems.sortable({
        stop: (event, ui) => {
            // get the array of new index (http://api.jqueryui.com/sortable/#method-toArray)
            const reorderedIndexes = this.domItems.sortable('toArray', {attribute: 'data-sortable'}) 
            // cancel the sort so the DOM is untouched
            this.domItems.sortable('cancel')
            // Update the store and let React update (here, using Flux)
            Actions.updateItems(Immutable.List(reorderedIndexes.map( idx => this.state.items.get(Number(idx)))))
        }
    })
}

The reason jQuery UI Sortable doesn't work with React is because it directly mutates the DOM, which is a big no no in React.

To make it work, you would have to modify jQuery UI Sortable so that you keep the DnD functionality, but when you drop the element, it does not modify the DOM. Instead, it could fire an event which triggers a React render with the new position of the elements.

Since React uses a Virtual DOM, you have to use the function React.findDOMNode() to access an actual DOM element.

I would call the jQuery UI function inside the componentDidMount method of your component because your element has to be already rendered to be accessible.

// You have to add a ref attribute to the element with the '.bank-entries' class
$( React.findDOMNode( this.refs.bank_entries_ref ) ).sortable( /.../ );

Documentation - Working with the browser (everything you need to know is here)

Hope that makes sense and resolves your issue