<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>

<div igxDrag (dragClick)="onDragClick()">
        <span>Drag Me!</span>
</div>

public onDragClick(){
     alert("The element has been clicked!");
}

<div igxDrag [dragDirection]="dragDir">
        <span>Drag Me!</span>
</div>

public dragDir = DragDirection.HORIZONTAL;

<div igxDrag (dragEnd)="onDragEnd()">
        <span>Drag Me!</span>
</div>

public onDragEnd(){
     alert("The drag has ended!");
}

<div igxDrag  (dragMove)="onDragMove()">
        <span>Drag Me!</span>
</div>

public onDragMove(){
     alert("The element has moved!");
}

<div igxDrag (dragStart)="onDragStart()">
        <span>Drag Me!</span>
</div>

public onDragStart(){
     alert("The drag has stared!");
}

<div igxDrag [dragTolerance]="100">
        <span>Drag Me!</span>
</div>

<div igxDrag [ghost]="false">
     <span>Drag Me!</span>
</div>

<div igxDrag [ghostClass]="'ghostElement'">
        <span>Drag Me!</span>
</div>

<div igxDrag (ghostCreate)="ghostCreated()">
        <span>Drag Me!</span>
</div>

public ghostCreated(){
     alert("The ghost has been created!");
}

<div igxDrag (ghostDestroy)="ghostDestroyed()">
        <span>Drag Me!</span>
</div>

public ghostDestroyed(){
     alert("The ghost has been destroyed!");
}

<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
        <span>Drag Me!</span>
</div>

<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
        <span>Drag Me!</span>
</div>

<div igxDrag [ghostTemplate]="customGhost">
        <span>Drag Me!</span>
</div>
<ng-template #customGhost>
     <div class="customGhostStyle">
         <span>I am being dragged!</span>
     </div>
</ng-template>

<div igxDrag (transitioned)="onMoveEnd()">
        <span>Drag Me!</span>
</div>

public onMoveEnd(){
     alert("The move has ended!");
}