Class IgxDragDirective

Hierarchy

Hierarchy

  • IgxDragDirective

Implements

  • AfterContentInit
  • OnDestroy

Constructors

Properties

cdr: ChangeDetectorRef
dragChannel: string | number | string[] | number[]

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

IgxDragDirective

dragClick: EventEmitter<IDragBaseEventArgs> = ...

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

Memberof

IgxDragDirective

dragDirection: DragDirection = DragDirection.BOTH

An

Input

property that indicates 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;

Memberof

IgxDragDirective

dragEnd: EventEmitter<IDragBaseEventArgs> = ...

Event triggered when the draggable element is released.

<div igxDrag (dragEnd)="onDragEnd()">
<span>Drag Me!</span>
</div>
public onDragEnd(){
alert("The drag has ended!");
}

Memberof

IgxDragDirective

dragMove: EventEmitter<IDragMoveEventArgs> = ...

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

Memberof

IgxDragDirective

dragStart: EventEmitter<IDragStartEventArgs> = ...

Event triggered when the draggable element drag starts.

<div igxDrag (dragStart)="onDragStart()">
<span>Drag Me!</span>
</div>
public onDragStart(){
alert("The drag has stared!");
}

Memberof

IgxDragDirective

dragTolerance: number = 5

An

Input

property that indicates when the drag should start. By default the drag starts after the draggable element is moved by 5px.

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

Memberof

IgxDragDirective

element: ElementRef<any>
ghost: boolean = true

An

Input

property that specifies if the base element should not be moved and a ghost element should be rendered that represents it. 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>

Memberof

IgxDragDirective

ghostClass: string = ''

Sets a custom class that will be added to the ghostElement element.

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

Memberof

IgxDragDirective

ghostCreate: EventEmitter<IDragGhostBaseEventArgs> = ...

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

Memberof

IgxDragDirective

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs> = ...

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

Memberof

IgxDragDirective

ghostHost: any

An

Input

property that 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>

Memberof

IgxDragDirective

ghostStyle: {} = {}

Set styles that will be added to the ghostElement element.

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

Memberof

IgxDragDirective

Type declaration

    ghostTemplate: TemplateRef<any>

    An

    Input

    property that 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>

    Memberof

    IgxDragDirective

    renderer: Renderer2
    scrollContainer: HTMLElement = null

    An

    Input

    assigning a scroll container to the dragged element. By default its the window.

    transitioned: EventEmitter<IDragBaseEventArgs> = ...

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

    Memberof

    IgxDragDirective

    viewContainer: ViewContainerRef
    zone: NgZone

    Accessors

    Methods

    • 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.

      Parameters

      • target: ElementRef<any> | IgxDragLocation

        Target that the base or ghost will transition to. It can be either location in the page or another HTML element.

      • Optional customAnimArgs: IDragCustomTransitionArgs

        Custom transition properties that will be applied when performing the transition.

      • Optional startLocation: IgxDragLocation

        Start location from where the transition should start.

      Returns void

    • 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.

      Parameters

      • Optional customAnimArgs: IDragCustomTransitionArgs

        Custom transition properties that will be applied when performing the transition.

      • Optional startLocation: IgxDragLocation

        Start location from where the transition should start.

      Returns void