| Name | Type | Default |
|---|---|---|
| appendTo | String | 'parent' |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [appendTo]="'document.body'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| axis | String | Number | null |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [axis]="'y'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| cancelProperty | String | 'input,textarea,button,select,option' |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [cancelProperty]="'.not-sortable-item'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| connectWith | String | Boolean | true |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [connectWith]="'#sortable1, #sortable2'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| containment | String | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [containment]="'.sortable-container'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| cursor | String | 'auto' |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [cursor]="'move'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| cursorAt | SortableCursorAt | false |
|
interface SortableCursorAt {
left?: Number; top?: Number; right?: Number; bottom?: Number; } Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [cursorAt]="{ left: 5, top:5 }">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| delay | Number | 0 |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [delay]="500">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| disabled | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [disabled]="true">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| distance | Number | 1 |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [distance]="10">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| dropOnEmpty | Boolean | true |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [dropOnEmpty]="false">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| forceHelperSize | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [forceHelperSize]="true">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| forcePlaceholderSize | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [forcePlaceholderSize]="true">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| grid | Array<Number> | [ 0, 0 ] |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [grid]="[ 50, 50 ]">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| handle | String | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [handle]="'.handle'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| helper | enum:SortableHelper | (originalEvent?: Any, content?: Any) => Void | 'original' |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [helper]="'clone'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| items | String | '> *' |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [items]="'> div.sortable-item'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| opacity | Number | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [opacity]="0.5">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| placeholderShow | String | Boolean | "original" |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [placeholderShow]="'sortable-placeholder'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| revert | Number | Boolean | false |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [revert]="true">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| scroll | Boolean | true |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [scroll]="false">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| scrollSensitivity | Number | 20 |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [scrollSensitivity]="10">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| scrollSpeed | Number | 20 |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [scrollSpeed]="40">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| tolerance | enum:SortableTolerance | 'intersect' |
|
enum SortableTolerance {
intersect, pointer } Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [tolerance]="'pointer'">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
| zIndex | Number | 1000 |
|
Sets or gets the import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable [zIndex]="2000">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
}
|
||
Events |
||
| activate | Event | |
|
This event is triggered on drag start when are used connected lists. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onActivate)="Activate($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Activate(event: any): void
{
// Do Something
}
|
||
| beforeStop | Event | |
|
This event is triggered when sorting stops, but when the placeholder/helper is still available. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onBeforeStop)="BeforeStop($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
BeforeStop(event: any): void
{
// Do Something
}
|
||
| change | Event | |
|
This event is triggered when the DOM position of an item is changed. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onChange)="Change($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Change(event: any): void
{
// Do Something
}
|
||
| create | Event | |
|
This event is triggered when the sortable is created. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onCreate)="Create($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Create(event: any): void
{
// Do Something
}
|
||
| deactivate | Event | |
|
This event is triggered when sorting was stopped, is propagated to all possible connected lists. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onDeactivate)="Deactivate($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Deactivate(event: any): void
{
// Do Something
}
|
||
| out | Event | |
|
This event is triggered when a sortable item is moved away from a sortable list. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onOut)="Out($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Out(event: any): void
{
// Do Something
}
|
||
| over | Event | |
|
This event is triggered when a sortable item is moved into a sortable list. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onOver)="Over($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Over(event: any): void
{
// Do Something
}
|
||
| 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
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onReceive)="Receive($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Receive(event: any): void
{
// Do Something
}
|
||
| remove | Event | |
|
This event is triggered when a sortable item from the list has been dropped into another. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onRemove)="Remove($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Remove(event: any): void
{
// Do Something
}
|
||
| sort | Event | |
|
This event is triggered during sorting. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onSort)="Sort($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Sort(event: any): void
{
// Do Something
}
|
||
| start | Event | |
|
This event is triggered when sorting starts. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onStart)="Start($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Start(event: any): void
{
// Do Something
}
|
||
| stop | Event | |
|
This event is triggered when sorting has stopped. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onStop)="Stop($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Stop(event: any): void
{
// Do Something
}
|
||
| update | Event | |
|
This event is triggered when the user stopped sorting and the DOM position has changed. Code examples
Bind to the
import { Component, ViewEncapsulation } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable(onUpdate)="Update($event)">
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
Update(event: any): void
{
// Do Something
}
|
||
Methods |
||
| Name | Return Type | Arguments |
| cancelMethod | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| destroy | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| disable | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| enable | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| refresh | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| refreshPositions | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| serialize | Void | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||
| toArray | Array<Any> | None |
import { Component, ViewEncapsulation, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxSortable #mySortable>
<div class="inner-div">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
<div class="inner-div">5</div>
<div class="inner-div">6</div>
<div class="inner-div">7</div>
<div class="inner-div">8</div>
<div class="inner-div">9</div>
</jqxSortable>
`,
styles: [`
jqxSortable > div {
list-style-type: none;
margin: 2px;
padding: 5px;
float: left;
width: 312px;
border: lightblue solid 2px;
}
.inner-div {
margin: 1px;
display: inline-block;
background-color: lightblue;
border: DodgerBlue solid 1px;
padding: 0;
float: left;
padding-left: 0;
text-align: center;
cursor: pointer;
font-size: 5.2em;
width: 100px;
height: 100px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('mySortable') mySortable: jqxSortableComponent; |
||