Angular UI Components Documentation

Sets or gets the appendTo property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]="'.main-container'" [appendTo]="'body'">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the disabled property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [disabled]="true">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the distance property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [distance]="12">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the data property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [data]='{foo: 'foo', bar: 'bar'}'>
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

enum DragDropDropAction {
     default,
     none
}

Sets or gets the dropAction property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]="'.main-container'" [dropAction]="'none'">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the dropTarget property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [dropTarget]=".dropTarget">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the dragZIndex property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [dragZIndex]="6">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

enum DragDropFeedBack {
     clone,
     original
}

Sets or gets the feedback property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]="'.main-container'" [feedback]="'original'">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the initFeedback property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [initFeedback]="initFeedback">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the opacity property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [opacity]="0.3">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onDragEnd property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onDragEnd]="onDragEnd">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onDrag property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onDrag]="onDrag">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onDragStart property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onDragStart]="onDragStart">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onTargetDrop property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onTargetDrop]="onTargetDrop">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onDropTargetEnter property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onDropTargetEnter]="onDropTargetEnter">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the onDropTargetLeave property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [onDropTargetLeave]="onDropTargetLeave">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

enum DragDropRestricter {
     body,
     document,
     parent,
     { left, top, width, height }
}

Sets or gets the restricter property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the revert property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [revert]="true">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

Sets or gets the revertDuration property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]=".main-container" [revertDuration]="300" [revert]="true">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

enum DragDropTolerance {
     fit,
     intersect
}

Sets or gets the tolerance property.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable"  
                    [dropTarget]="'.drop-target'" [restricter]="'.main-container'" [tolerance]="'fit'">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    
}      

This event is triggered when the item is dragged for first time.

Code examples

Bind to the dragStart event of jqxDragDrop.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable" (onDragStart)="DragStart($event)" 
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    DragStart(event: any): void 
    {
        // Do Something
    }

    
}      
							
						

This event is triggered when the item is dropped.

Code examples

Bind to the dragEnd event of jqxDragDrop.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable" (onDragEnd)="DragEnd($event)" 
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    DragEnd(event: any): void 
    {
        // Do Something
    }

    
}      
							
						

This event is triggered while the item is dragging.

Code examples

Bind to the dragging event of jqxDragDrop.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable" (onDragging)="Dragging($event)" 
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    Dragging(event: any): void 
    {
        // Do Something
    }

    
}      
							
						

This event is triggered when the draggable item is over it's drop target for first time.

Code examples

Bind to the dropTargetEnter event of jqxDragDrop.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable" (onDropTargetEnter)="DropTargetEnter($event)" 
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    DropTargetEnter(event: any): void 
    {
        // Do Something
    }

    
}      
							
						

This event is triggered when the draggable item leave it's drop target.

Code examples

Bind to the dropTargetLeave event of jqxDragDrop.

import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <div class="main-container">
            <div id="draggable-parent">
                <jqxDragDrop #myDragDrop class="draggable" (onDropTargetLeave)="DropTargetLeave($event)" 
                    [dropTarget]="'.drop-target'" [restricter]=".main-container">
                </jqxDragDrop>
 
                <div class="drop-target">
                    <div class="label">I am a drop target</div>
                </div>
            </div>
         </div>
    `,
    styles: [`
        .row {
            padding: 1px;
        }
        .draggable > div {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 350px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 650px;
            z-index: 0;
        }
        .label {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 150px;
            height: 150px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
    `]
})
 
export class AppComponent {
    DropTargetLeave(event: any): void 
    {
        // Do Something
    }

    
}