Sets or gets the appendTo property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} appendTo={'document.body'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the axis property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} axis={'y'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cancelProperty property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} cancelProperty={'.not-sortable-item'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the connectWith property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} connectWith={'#sortable1, #sortable2'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the containment property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} containment={'.sortable-container'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cursor property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} cursor={'move'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cursorAt property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} cursorAt={{ left: 5, top:5 }}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the delay property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} delay={500}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} disabled={true}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the distance property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} distance={10}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dropOnEmpty property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} dropOnEmpty={false}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the forceHelperSize property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} forceHelperSize={true}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the forcePlaceholderSize property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} forcePlaceholderSize={true}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the grid property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} grid={[ 50, 50 ]}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the handle property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} handle={'.handle'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the helper property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} helper={'clone'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the items property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} items={'> div.sortable-item'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the opacity property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} opacity={0.5}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the placeholderShow property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} placeholderShow={'sortable-placeholder'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the revert property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} revert={true}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scroll property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} scroll={false}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollSensitivity property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} scrollSensitivity={10}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollSpeed property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} scrollSpeed={40}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the tolerance property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} tolerance={'pointer'}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the zIndex property.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle} zIndex={2000}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered on drag start when are used connected lists.

Code examples

Bind to the activate event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('activate', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when sorting stops, but when the placeholder/helper is still available.

Code examples

Bind to the beforeStop event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('beforeStop', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the DOM position of an item is changed.

Code examples

Bind to the change event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('change', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the sortable is created.

Code examples

Bind to the create event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('create', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when sorting was stopped, is propagated to all possible connected lists.

Code examples

Bind to the deactivate event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('deactivate', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a sortable item is moved away from a sortable list.

Code examples

Bind to the out event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('out', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a sortable item is moved into a sortable list.

Code examples

Bind to the over event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('over', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when an item from a connected sortable list has been dropped into another list.

Code examples

Bind to the receive event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('receive', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a sortable item from the list has been dropped into another.

Code examples

Bind to the remove event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('remove', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered during sorting.

Code examples

Bind to the sort event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('sort', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when sorting starts.

Code examples

Bind to the start event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('start', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when sorting has stopped.

Code examples

Bind to the stop event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('stop', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user stopped sorting and the DOM position has changed.

Code examples

Bind to the update event of jqxSortable.

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.on('update', (event) => {
            // Do Something...
        });
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.cancelMethod();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.destroy();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.disable();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.enable();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.refresh();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.refreshPositions();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        this.refs.mySortable.serialize();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import ReactDOM from 'react-dom';
 
import JqxSortable from 'jqwidgets-react/react_jqxsortable.js';
 
style App extends React.Component { 
    componentDidMount() {
        let value = this.refs.mySortable.toArray();
    }

    render() {    
        let sortableStyle = {
            listStyleType: 'none',
            margin: 2,
            padding: 5,
            float: 'left',
            width: 312,
            border: 'lightblue solid 2px',
        };   
        let innerDiv = {
            margin: 1,
            display: 'inline-block',
            backgroundColor: 'lightblue',
            border: 'DodgerBlue solid 1px',
            padding: 0,
            float: 'left',
            paddingLeft: 0,
            textAlign: 'center',
            cursor: 'pointer',
            fontSize: '5.2em',
            width: 100,
            height: 100
        };
        return (
            <JqxSortable ref='mySortable' style={sortableStyle}
                <div style={innerDiv}>1</div>
                <div style={innerDiv}>2</div>
                <div style={innerDiv}>3</div>
                <div style={innerDiv}>4</div>
                <div style={innerDiv}>5</div>
                <div style={innerDiv}>6</div>
                <div style={innerDiv}>7</div>
                <div style={innerDiv}>8</div>
                <div style={innerDiv}>9</div>
            </JqxSortable>
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));