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!");
}
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!");
}
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!");
}
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!");
}
igxDrop directive. This can be set when instancing igxDrop on an element.<div [igxDrop]="{ source: myElement }"></div>
Sets a drop strategy type that will be executed when an IgxDrag element is released inside
the current drop area. The provided strategies are:
igxDrop.igxDrop.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;
}
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.