IgxDropDirective

new IgxDropDirective(): IgxDropDirective

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1777

Returns IgxDropDirective

A property that provides a way for igxDrag and igxDrop to be linked through channels. It accepts single value or an array of values and evaluates then using strict equality.

<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>
dropChannel: string | number | string[] | number[]

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1646

Event triggered when dragged element is dropped in the area of the element. Since the igxDrop has default logic that appends the dropped element as a child, it can be canceled here. To cancel the default logic the cancel property of the event needs to be set to true.

<div class="cageArea" igxDrop (dropped)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragDrop(){
    alert("A draggable element has been dropped in the chip area!");
}
dropped: EventEmitter<IDropDroppedEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1751

element: ElementRef<any>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1773

Event triggered when dragged element enters the area of the element.

<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
    alert("A draggable element has entered the chip area!");
}
enter: EventEmitter<IDropBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1698

Event triggered when dragged element leaves the area of the element.

<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragLeave(){
    alert("A draggable element has left the chip area!");
}
leave: EventEmitter<IDropBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1732

Event triggered when dragged element enters the area of the element.

<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
    alert("A draggable element has entered the chip area!");
}
over: EventEmitter<IDropBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1715

data: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1623, projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1627

dropStrategy: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1675, projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1679