| Name | Type | Default |
|---|---|---|
| appendTo | string | 'parent' |
|
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);
|
||
| axis | number | string | null |
|
If defined, the items can be dragged only horizontally or vertically. Possible Values:/* 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);
|
||
| cancel | string | 'input,textarea,button,select,option' |
|
Prevents sorting if you start on elements matching the selector. |
||
| connectWith | string | boolean | true |
|
A selector of other sortable elements that the items from this list should be connected to. |
||
| containment | string | boolean | false |
|
Defines a bounding box that the sortable items are constrained to while dragging. |
||
| cursor | string | 'auto' |
|
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);
|
||
| cursorAt | SortableCursorAt | false |
|
Interface SortableCursorAt {
left?: number; top?: number; right?: number; bottom?: number; } 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);
|
||
| delay | number | 0 |
|
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);
|
||
| disabled | boolean | false |
|
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);
|
||
| distance | number | 1 |
|
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);
|
||
| dropOnEmpty | boolean | true |
|
If false, items from this sortable can't be dropped on an empty connect sortable. |
||
| forceHelperSize | boolean | false |
|
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);
|
||
| forcePlaceholderSize | boolean | false |
|
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);
|
||
| grid | Array<number> | [ 0, 0 ] |
|
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);
|
||
| handle | string | boolean | false |
|
Restricts sort start click to the specified element. |
||
| helper | (originalEvent?: any, content?: any) => void | 'original' | 'clone' | 'original' |
|
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);
|
||
| items | string | '> *' |
|
Specifies which items inside the element should be sortable. |
||
| opacity | number | boolean | false |
|
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);
|
||
| placeholderShow | string | boolean | "original" |
|
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);
|
||
| revert | number | boolean | false |
|
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);
|
||
| scroll | boolean | true |
|
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);
|
||
| scrollSensitivity | number | 20 |
|
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);
|
||
| scrollSpeed | number | 20 |
|
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);
|
||
| tolerance | SortableTolerance | 'intersect' |
|
SortableTolerance: "intersect" | "pointer"
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);
|
||
| zIndex | number | 1000 |
|
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);
|
||
Events |
||
| activate | Event | |
|
This event is triggered on drag start when are used connected lists. Code examples
Bind to the
/* 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);
|
||
| beforeStop | Event | |
|
This event is triggered when sorting stops, but when the placeholder/helper is still available. Code examples
Bind to the
/* 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);
|
||
| change | Event | |
|
This event is triggered when the DOM position of an item is changed. Code examples
Bind to the
/* 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);
|
||
| deactivate | Event | |
|
This event is triggered when sorting was stopped, is propagated to all possible connected lists. Code examples
Bind to the
/* 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);
|
||
| out | Event | |
|
This event is triggered when a sortable item is moved away from a sortable list. Code examples
Bind to the
/* 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);
|
||
| over | Event | |
|
This event is triggered when a sortable item is moved into a sortable list. Code examples
Bind to the
/* 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);
|
||
| receive | Event | |
|
This event is triggered when an item from a connected sortable list has been dropped into another list. Code examples
Bind to the
/* 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);
|
||
| remove | Event | |
|
This event is triggered when a sortable item from the list has been dropped into another. Code examples
Bind to the
/* 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);
|
||
| sort | Event | |
|
This event is triggered during sorting. Code examples
Bind to the
/* 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);
|
||
| start | Event | |
|
This event is triggered when sorting starts. Code examples
Bind to the
/* 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);
|
||
| stop | Event | |
|
This event is triggered when sorting has stopped. Code examples
Bind to the
/* 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);
|
||
| update | Event | |
|
This event is triggered when the user stopped sorting and the DOM position has changed. Code examples
Bind to the
/* 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);
|
||
Methods |
||
| Name | Arguments | Return Type |
| cancelMethod | None | |
|
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);
|
||
| destroy | None | |
|
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);
|
||
| disable | None | |
|
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 | None | |
|
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 | None | |
|
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);
|
||
| refreshPositions | None | |
|
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);
|
||
| serialize | object | |
|
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. |
||
| toArray | None | |
|
Serializes the jqxSortable item ids into an array of strings. |
||