Class IgxDropDirective

Hierarchy

  • IgxDropDirective

Implements

  • OnInit
  • OnDestroy

Constructors

Properties

Accessors

Constructors

constructor

  • new IgxDropDirective(element: ElementRef, _renderer: Renderer2, _zone: NgZone): IgxDropDirective

Properties

data

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

IgxDropDirective

dropChannel

dropChannel: number | string | number[] | string[]

An @Input property that provide 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>
memberof

IgxDropDirective

dropped

dropped: EventEmitter<IDropDroppedEventArgs> = new EventEmitter<IDropDroppedEventArgs>()

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!");
}
memberof

IgxDropDirective

element

element: ElementRef

enter

enter: EventEmitter<IDropBaseEventArgs> = new EventEmitter<IDropBaseEventArgs>()

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!");
}
memberof

IgxDropDirective

leave

leave: EventEmitter<IDropBaseEventArgs> = new EventEmitter<IDropBaseEventArgs>()

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!");
}
memberof

IgxDropDirective

over

over: EventEmitter<IDropBaseEventArgs> = new EventEmitter<IDropBaseEventArgs>()

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!");
}
memberof

IgxDropDirective

Accessors

dropStrategy

  • get dropStrategy(): any
  • set dropStrategy(classRef: any): void
  • An @Input property that specifies a drop strategy type that will be executed when an IgxDrag element is released inside the current drop area. The provided strategies are:

    • IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.
    • IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the igxDrop.
    • IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the igxDrop.
    • IgxInsertDropStrategy - 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>
      `typescript import { IgxAppendDropStrategy } from 'igniteui-angular';

    export class App { public myDropStrategy = IgxAppendDropStrategy; } `

    Returns any

  • An @Input property that specifies a drop strategy type that will be executed when an IgxDrag element is released inside the current drop area. The provided strategies are:

    • IgxDefaultDropStrategy - This is the default base strategy and it doesn't perform any actions.
    • IgxAppendDropStrategy - Appends the dropped element to last position as a direct child to the igxDrop.
    • IgxPrependDropStrategy - Prepends the dropped element to first position as a direct child to the igxDrop.
    • IgxInsertDropStrategy - 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>
      `typescript import { IgxAppendDropStrategy } from 'igniteui-angular';

    export class App { public myDropStrategy = IgxAppendDropStrategy; } `

    memberof

    IgxDropDirective

    Parameters

    • classRef: any

    Returns void