Class IgxDragDirective

Hierarchy

  • IgxDragDirective

Implements

  • AfterContentInit
  • OnDestroy

Constructors

constructor

  • new IgxDragDirective(cdr: ChangeDetectorRef, element: ElementRef, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2): IgxDragDirective

Properties

animateOnRelease

animateOnRelease: boolean = false
deprecated

Please use provided transition functions in future. An @Input property that enables/disables the draggable element animation when the element is released. By default it's set to false.

<div igxDrag [animateOnRelease]="'true'">
        <span>Drag Me!</span>
</div>
memberof

IgxDragDirective

cdr

cdr: ChangeDetectorRef

data

data: any
  • Save data inside the igxDrag directive. This can be set when instancing igxDrag on an element.
    <div [igxDrag]="{ source: myElement }"></div>
memberof

IgxDragDirective

dragChannel

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

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

dragClick: EventEmitter<IDragBaseEventArgs> = new 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

dragEnd

dragEnd: EventEmitter<IDragBaseEventArgs> = new 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

dragMove: EventEmitter<IDragMoveEventArgs> = new 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

dragStart: EventEmitter<IDragStartEventArgs> = new 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

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

element: ElementRef

ghost

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

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

ghostCreate: EventEmitter<IDragGhostBaseEventArgs> = new 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

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs> = new 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

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

ghostTemplate

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

hideBaseOnDrag

hideBaseOnDrag: boolean = false
deprecated

Please use custom base styling instead. An @Input property that hides the draggable element. By default it's set to false.

<div igxDrag [dragTolerance]="100" [hideBaseOnDrag]="'true'">
        <span>Drag Me!</span>
</div>
memberof

IgxDragDirective

renderer

renderer: Renderer2

transitioned

transitioned: EventEmitter<IDragBaseEventArgs> = new 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

viewContainer: ViewContainerRef

zone

zone: NgZone

Accessors

ghostOffsetX

  • get ghostOffsetX(): any
  • set ghostOffsetX(value: any): void
  • An @Input property that specifies 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>

    Returns any

  • An @Input property that specifies 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>
    memberof

    IgxDragDirective

    Parameters

    • value: any

    Returns void

ghostOffsetY

  • get ghostOffsetY(): any
  • set ghostOffsetY(value: any): void
  • An @Input property that specifies 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>

    Returns any

  • An @Input property that specifies 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>
    memberof

    IgxDragDirective

    Parameters

    • value: any

    Returns void

location

originLocation

visible

  • get visible(): boolean
  • set visible(bVisible: boolean): void
  • Returns the visibility state of the draggable element.

    @ViewChild("myDrag" ,{read: IgxDragDirective})
    public myDrag: IgxDragDirective;
    ngAfterViewInit(){
        let dragVisibility = this.myDrag.visible;
    }

    Returns boolean

  • Returns the visibility state of the draggable element.

    @ViewChild("myDrag" ,{read: IgxDragDirective})
    public myDrag: IgxDragDirective;
    ngAfterViewInit(){
        let dragVisibility = this.myDrag.visible;
    }
    deprecated

    Please use native angular ways of hiding it using custom to the base element styling for future versions. Sets the visibility of the draggable element.

    @ViewChild("myDrag" ,{read: IgxDragDirective})
    public myDrag: IgxDragDirective;
    ngAfterViewInit(){
        this.myDrag.visible = false;
    }

    Parameters

    • bVisible: boolean

    Returns void

Methods

dropFinished

  • dropFinished(): void
  • deprecated

    This method will be removed in future major version. Please use transitionToOrigin or transitionTo. Informs the igxDrag directive that it has been dropped/released. This should usually be called when animateOnRelease is set to true. When canceling or defining custom drop logic this tells the igxDrag to update it's positions and animate correctly to the new position.

    public onDropElem(event) {
        // Function bound to the igxDrop directive event `onDrop`
        // This cancels the default drop logic of the `igxDrop`
        event.cancel = true;
        event.drag.dropFinished();
    }

    Returns void

setLocation

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.

    Parameters

    • target: IgxDragLocation | ElementRef

      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

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.

    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