Angular UI Components Documentation

Sets or gets the appendTo property.

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 {
    
}

Sets or gets the axis property.

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 {
    
}

Sets or gets the cancelProperty property.

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 {
    
}

Sets or gets the connectWith property.

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 {
    
}

Sets or gets the containment property.

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 {
    
}

Sets or gets the cursor property.

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 {
    
}

interface SortableCursorAt {
     left?: Number;
     top?: Number;
     right?: Number;
     bottom?: Number;
}

Sets or gets the cursorAt property.

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 {
    
}

Sets or gets the delay property.

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 {
    
}

Sets or gets the disabled property.

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 {
    
}

Sets or gets the distance property.

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 {
    
}

Sets or gets the dropOnEmpty property.

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 {
    
}

Sets or gets the forceHelperSize property.

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 {
    
}

Sets or gets the forcePlaceholderSize property.

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 {
    
}

Sets or gets the grid property.

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 {
    
}

Sets or gets the handle property.

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 {
    
}

Sets or gets the helper property.

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 {
    
}

Sets or gets the items property.

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 {
    
}

Sets or gets the opacity property.

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 {
    
}

Sets or gets the placeholderShow property.

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 {
    
}

Sets or gets the revert property.

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 {
    
}

Sets or gets the scroll property.

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 {
    
}

Sets or gets the scrollSensitivity property.

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 {
    
}

Sets or gets the scrollSpeed property.

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 {
    
}

enum SortableTolerance {
     intersect,
     pointer
}

Sets or gets the tolerance property.

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 {
    
}

Sets or gets the zIndex property.

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 {
    
}

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

Code examples

Bind to the activate event of jqxSortable.

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
    }

    
}
							
						

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

Code examples

Bind to the beforeStop event of jqxSortable.

import { 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
    }

    
}
							
						

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

Code examples

Bind to the change event of jqxSortable.

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
    }

    
}
							
						

This event is triggered when the sortable is created.

Code examples

Bind to the create event of jqxSortable.

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
    }

    
}
							
						

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

Code examples

Bind to the deactivate event of jqxSortable.

import { 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
    }

    
}
							
						

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

Code examples

Bind to the out event of jqxSortable.

import { 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
    }

    
}
							
						

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

Code examples

Bind to the over event of jqxSortable.

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
    }

    
}
							
						

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

Code examples

Bind to the receive event of jqxSortable.

import { 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
    }

    
}
							
						

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

Code examples

Bind to the remove event of jqxSortable.

import { 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
    }

    
}
							
						

This event is triggered during sorting.

Code examples

Bind to the sort event of jqxSortable.

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
    }

    
}
							
						

This event is triggered when sorting starts.

Code examples

Bind to the start event of jqxSortable.

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
    }

    
}
							
						

This event is triggered when sorting has stopped.

Code examples

Bind to the stop event of jqxSortable.

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
    }

    
}
							
						

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

Code examples

Bind to the update event of jqxSortable.

import { 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
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.cancelMethod();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.destroy();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.disable();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.enable();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.refresh();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.refreshPositions();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        this.mySortable.serialize();
    }

    
}
							
						

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; 
 
    ngAfterViewInit(): void 
    {
        let value = this.mySortable.toArray();
    }

    
}