Constructors

Section titled "Constructors"

IgxColumnMovingDropDirective 

new IgxColumnMovingDropDirective(): IgxColumnMovingDropDirective

Defined in projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:54

Returns IgxColumnMovingDropDirective

Properties

Section titled "Properties"

dropChannel

Section titled "dropChannel"

Inherited from: 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:1672

dropped

Section titled "dropped"

Inherited from: IgxDropDirective

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:1777

element

Section titled "element"

Inherited from: IgxDropDirective 

element: ElementRef<any>

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

enter

Section titled "enter"

Inherited from: IgxDropDirective

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:1724

leave

Section titled "leave"

Inherited from: IgxDropDirective

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:1758

over

Section titled "over"

Inherited from: IgxDropDirective

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:1741

Accessors

Section titled "Accessors"

column

Section titled "column"

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(val: ColumnType | IgxForOfDirective<ColumnType, ColumnType[]>): void

Defined in projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:18

Parameters

Returns void

dropStrategy

Section titled "dropStrategy"

Inherited from: IgxDropDirective

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:1701

Parameters

  • classRef: any

Returns void

horizontalScroll

Section titled "horizontalScroll"

isDropTarget

Section titled "isDropTarget" 
get isDropTarget(): boolean

Defined in projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:31

Returns boolean

nativeElement

Section titled "nativeElement" 
get nativeElement(): any

Defined in projects/igniteui-angular/grids/core/src/moving/moving.drop.directive.ts:42

Returns any