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

over

Section titled "over"

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

Accessors

Section titled "Accessors"

data

Section titled "data"
  • Save data inside the igxDrop directive. This can be set when instancing igxDrop on an element.
<div [igxDrop]="{ source: myElement }"></div>
set data(v: any): void

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

Parameters

  • v: any

Returns void

dropStrategy

Section titled "dropStrategy"

Sets a drop strategy type that will be executed when an drag element is released inside the current drop area. The provided strategies are:

  • default drop strategy - This is the default base strategy and it doesn't perform any actions.
  • append drop strategy - Appends the dropped element to last position as a direct child to the igxDrop.
  • prepend drop strategy - Prepends the dropped element to first position as a direct child to the igxDrop.
  • insert drop strategy - If the dropped element is released above a child element of the igxDrop, it will be inserted at that position. Otherwise the dropped element will be appended if released outside any child of the igxDrop.
<div igxDrag>
     <span>DragMe</span>
</div>
<div igxDrop [dropStrategy]="myDropStrategy">
        <span>Numbers drop area!</span>
</div>
import { IgxAppendDropStrategy } from 'igniteui-angular';

export class App {
     public myDropStrategy = IgxAppendDropStrategy;
}
set dropStrategy(classRef: any): void

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

Parameters

  • classRef: any

Returns void