Constructors
Section titled "Constructors"IgxDropDirective
new IgxDropDirective(): IgxDropDirective Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1777
Returns IgxDropDirective
Properties
Section titled "Properties"dropChannel
Section titled "dropChannel"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
dropped
Section titled "dropped"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
Section titled "element"element: ElementRef<any> Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:1773
enter
Section titled "enter"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
leave
Section titled "leave"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
Section titled "dropStrategy"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