IgxDragDirective
Event triggered when the draggable element is clicked.
<div igxDrag (dragClick)="onDragClick()">
<span>Drag Me!</span>
</div>
public onDragClick(){
alert("The element has been clicked!");
}
IgxDragDirective
Sets the directions that the element can be dragged. By default it is set to both horizontal and vertical directions.
<div igxDrag [dragDirection]="dragDir">
<span>Drag Me!</span>
</div>
public dragDir = DragDirection.HORIZONTAL;
IgxDragDirective
Event triggered when the draggable element is released.
<div igxDrag (dragEnd)="onDragEnd()">
<span>Drag Me!</span>
</div>
public onDragEnd(){
alert("The drag has ended!");
}
IgxDragDirective
Event triggered when the draggable element has been moved.
<div igxDrag (dragMove)="onDragMove()">
<span>Drag Me!</span>
</div>
public onDragMove(){
alert("The element has moved!");
}
IgxDragDirective
Event triggered when the draggable element drag starts.
<div igxDrag (dragStart)="onDragStart()">
<span>Drag Me!</span>
</div>
public onDragStart(){
alert("The drag has stared!");
}
IgxDragDirective
Sets the tolerance in pixels before drag starts. By default the drag starts after the draggable element is moved by 5px.
<div igxDrag [dragTolerance]="100">
<span>Drag Me!</span>
</div>
IgxDragDirective
Sets whether the base element should be moved, or a ghost element should be rendered that represents it instead.
By default it is set to true.
If it is set to false when dragging the base element is moved instead and no ghost elements are rendered.
<div igxDrag [ghost]="false">
<span>Drag Me!</span>
</div>
IgxDragDirective
Sets a custom class that will be added to the ghostElement element.
<div igxDrag [ghostClass]="'ghostElement'">
<span>Drag Me!</span>
</div>
IgxDragDirective
Event triggered when the drag ghost element is created.
<div igxDrag (ghostCreate)="ghostCreated()">
<span>Drag Me!</span>
</div>
public ghostCreated(){
alert("The ghost has been created!");
}
IgxDragDirective
Event triggered when the drag ghost element is created.
<div igxDrag (ghostDestroy)="ghostDestroyed()">
<span>Drag Me!</span>
</div>
public ghostDestroyed(){
alert("The ghost has been destroyed!");
}
IgxDragDirective
Sets the element to which the dragged element will be appended. By default it's set to null and the dragged element is appended to the body.
<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
<span>Drag Me!</span>
</div>
IgxDragDirective
Set styles that will be added to the ghostElement element.
<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
<span>Drag Me!</span>
</div>
IgxDragDirective
Specifies a template for the ghost element created when dragging starts and ghost is true.
By default a clone of the base element the igxDrag is instanced is created.
<div igxDrag [ghostTemplate]="customGhost">
<span>Drag Me!</span>
</div>
<ng-template #customGhost>
<div class="customGhostStyle">
<span>I am being dragged!</span>
</div>
</ng-template>
IgxDragDirective
Overrides the scroll container of the dragged element. By default its the window.
Event triggered after the draggable element is released and after its animation has finished.
<div igxDrag (transitioned)="onMoveEnd()">
<span>Drag Me!</span>
</div>
public onMoveEnd(){
alert("The move has ended!");
}
IgxDragDirective
igxDrag directive. This can be set when instancing igxDrag on an element.<div [igxDrag]="{ source: myElement }"></div>
IgxDragDirective
Sets the offset of the dragged element relative to the mouse in pixels. By default it's taking the relative position to the mouse when the drag started and keeps it the same.
<div #hostDiv></div>
<div igxDrag [ghostOffsetX]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
Sets the offset of the dragged element relative to the mouse in pixels. By default it's taking the relative position to the mouse when the drag started and keeps it the same.
<div #hostDiv></div>
<div igxDrag [ghostOffsetY]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
Gets the current location of the element relative to the page.
Gets the original location of the element before dragging started.
Sets desired location of the base element or ghost element if rended relative to the document.
New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll.
Animates the base or ghost element to a specific target location or other element using transition.
If ghost is true but there is not ghost rendered, it will be created and animated.
It is recommended to use 'getBoundingClientRects() + pageScroll' when determining desired location.
Target that the base or ghost will transition to. It can be either location in the page or another HTML element.
Custom transition properties that will be applied when performing the transition.
Start location from where the transition should start.
Animates the base or ghost element depending on the ghost input to its initial location.
If ghost is true but there is not ghost rendered, it will be created and animated.
If the base element has changed its DOM position its initial location will be changed accordingly.
Custom transition properties that will be applied when performing the transition.
Start location from where the transition should start.
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.