React UI Components Documentation

Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        appendTo={'document.body'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

If defined, the items can be dragged only horizontally or vertically.

'x'

'y'

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        axis={'y'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Prevents sorting if you start on elements matching the selector.

A selector of other sortable elements that the items from this list should be connected to.

Defines a bounding box that the sortable items are constrained to while dragging.

Defines the cursor that is being shown while sorting.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        cursor={'move'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        cursorAt={{ left: 5, top:5 }}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Time in milliseconds to define when the sorting should start. Adding a delay helps preventing unwanted drags when clicking on an element.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        delay={500}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables the widget if set to true.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        disabled={true}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        distance={10}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

If false, items from this sortable can't be dropped on an empty connect sortable.

If true, forces the helper to have a size.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        forceHelperSize={true}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displaying of the popover's arrow.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        forcePlaceholderSize={true}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Snaps the sorting element or helper to a grid, every x and y pixels.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        grid={[ 50, 50 ]}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Restricts sort start click to the specified element.

Allows for a helper element to be used for dragging display.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        helper={'clone'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies which items inside the element should be sortable.

Defines the opacity of the helper while sorting. From 0.01 to 1.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        opacity={0.5}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A class name that gets applied to the otherwise white space.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        placeholderShow={'sortable-placeholder'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Whether the sortable items should revert to their new positions using a smooth animation.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        revert={true}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

If set to true, the page scrolls when coming to an edge.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        scroll={false}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Defines how near the mouse must be to an edge to start scrolling.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        scrollSensitivity={10}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Allows for a helper element to be used for dragging display.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        scrollSpeed={40}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Specifies which mode to use for testing whether the item being moved is hovering over another item.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        tolerance={'pointer'}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Allows for a helper element to be used for dragging display.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
        zIndex={2000}>
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the activate event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onActivate={this.onActivate} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onActivate(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the beforeStop event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onBeforeStop={this.onBeforeStop} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onBeforeStop(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the change event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onChange={this.onChange} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the deactivate event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onDeactivate={this.onDeactivate} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onDeactivate(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the out event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onOut={this.onOut} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onOut(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the over event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onOver={this.onOver} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onOver(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onReceive={this.onReceive} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onReceive(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onRemove={this.onRemove} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onRemove(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered during sorting.

Code examples

Bind to the sort event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onSort={this.onSort} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onSort(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when sorting starts.

Code examples

Bind to the start event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onStart={this.onStart} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when sorting has stopped.

Code examples

Bind to the stop event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onStop={this.onStop} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onStop(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the update event of jqxSortable.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();  
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} onUpdate={this.onUpdate} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
 
  private onUpdate(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.cancelMethod();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes the sortable functionality.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables the widget.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enable the widget.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refresh the items.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refresh the cached positions of the sortable items.

/* CSSStylesheet.css */
  .jqx-sortable div {
     margin: 1px;
     background-color: lightblue;
     text-align: center; font-size: 20px;
     width: 100px;
     height: 30px;
  }
/* End CSSStylesheet.css */
 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import './CSSStylesheet.css';
import JqxSortable, { ISortableProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsortable';
 
class App extends React.PureComponent<{}, ISortableProps> {
  private mySortable = React.createRef<JqxSortable>();
 
  public componentDidMount(): void {
    this.mySortable.current!.refreshPositions();
  }
   
  
  public render() {
    return (
      <JqxSortable ref={this.mySortable} 
       >
        <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
      </JqxSortable>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Serializes the jqxSortable item ids into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

Serializes the jqxSortable item ids into an array of strings.