IgxDragDirective

Constructors

new IgxDragDirective(): IgxDragDirective

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:695

Returns IgxDragDirective

Properties

cdr

cdr: ChangeDetectorRef

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:688

dragChannel

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.

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

dragChannel: string | number | string[] | number[]

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:253

dragClick

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

dragClick: EventEmitter<IDragBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:406

dragDirection

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;

dragDirection: DragDirection = DragDirection.BOTH

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:236

dragEnd

Event triggered when the draggable element is released.

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

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

dragEnd: EventEmitter<IDragBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:388

dragMove

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

dragMove: EventEmitter<IDragMoveEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:370

dragStart

Event triggered when the draggable element drag starts.

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

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

dragStart: EventEmitter<IDragStartEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:352

dragTolerance

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>

dragTolerance: number = 5

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:219

element

element: ElementRef<any>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:689

ghost

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>

ghost: boolean = true

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:268

ghostClass

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

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

ghostClass: string = ''

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:281

ghostCreate

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

ghostCreate: EventEmitter<IDragGhostBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:424

ghostDestroy

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

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:442

ghostHost

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>

ghostHost: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:328

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>

ghostStyle: object = {}

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:294

ghostTemplate

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>

ghostTemplate: TemplateRef<any>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:313

renderer

renderer: Renderer2

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:692

scrollContainer

Overrides the scroll container of the dragged element. By default its the window.

scrollContainer: HTMLElement = null

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:334

transitioned

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

transitioned: EventEmitter<IDragBaseEventArgs>

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:460

viewContainer

viewContainer: ViewContainerRef

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:690

zone

zone: NgZone

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:691

data

data: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:199, projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:203

ghostOffsetX

ghostOffsetX: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:659, projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:663

ghostOffsetY

ghostOffsetY: any

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:680, projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:684

Accessors

location

Gets the current location of the element relative to the page.

get location(): IgxDragLocation

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:490

Returns IgxDragLocation

originLocation

Gets the original location of the element before dragging started.

get originLocation(): IgxDragLocation

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:497

Returns IgxDragLocation

Methods

setLocation

Sets desired location of the base element or ghost element if rended relative to the document.

setLocation(newLocation: IgxDragLocation): void

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:805

Parameters

newLocation: IgxDragLocation
New location that should be applied. It is advised to get new location using getBoundingClientRects() + scroll.

Returns void

transitionTo

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.

transitionTo(target: ElementRef<any> | IgxDragLocation, customAnimArgs: IDragCustomTransitionArgs, startLocation: IgxDragLocation): void

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:882

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.
customAnimArgs: IDragCustomTransitionArgs
Custom transition properties that will be applied when performing the transition.
startLocation: IgxDragLocation
Start location from where the transition should start.

Returns void

transitionToOrigin

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.

transitionToOrigin(customAnimArgs: IDragCustomTransitionArgs, startLocation: IgxDragLocation): void

Defined in projects/igniteui-angular/directives/src/directives/drag-drop/drag-drop.directive.ts:830

Parameters

customAnimArgs: IDragCustomTransitionArgs
Custom transition properties that will be applied when performing the transition.
startLocation: IgxDragLocation
Start location from where the transition should start.