クラス IgxDragDirective

階層

  • IgxDragDirective

実装

  • AfterContentInit
  • OnDestroy

Index

コンストラクタ

  • new IgxDragDirective(cdr: ChangeDetectorRef, element: ElementRef<any>, viewContainer: ViewContainerRef, zone: NgZone, renderer: Renderer2, platformUtil: PlatformUtil): IgxDragDirective

プロパティ

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

igxDrag と igxDrop をチャネルでリンクする方法を提供する @Input プロパティ。 単一の値または値の配列を受け入れ、完全に一致することで評価します。

<div igxDrag [dragChannel]="'odd'">
<span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
<span>Numbers drop area!</span>
</div>
次のメンバー:

IgxDragDirective

dragClick: EventEmitter<IDragBaseEventArgs> = ...

ドラッグ可能な要素がクリックされたときにトリガーされるイベント。

<div igxDrag (dragClick)="onDragClick()">
<span>Drag Me!</span>
</div>
public onDragClick(){
alert("The element has been clicked!");
}
次のメンバー:

IgxDragDirective

dragDirection: DragDirection = DragDirection.BOTH

要素をドラッグできる方向を示す @Input プロパティ。 デフォルトでは、水平方向と垂直方向の両方に設定されています。

<div igxDrag [dragDirection]="dragDir">
<span>Drag Me!</span>
</div>
public dragDir = DragDirection.HORIZONTAL;
次のメンバー:

IgxDragDirective

dragEnd: EventEmitter<IDragBaseEventArgs> = ...

ドラッグ可能な要素が解放されたときにトリガーされるイベント。

<div igxDrag (dragEnd)="onDragEnd()">
<span>Drag Me!</span>
</div>
public onDragEnd(){
alert("The drag has ended!");
}
次のメンバー:

IgxDragDirective

dragMove: EventEmitter<IDragMoveEventArgs> = ...

ドラッグ可能な要素が移動されたときにトリガーされるイベント。

<div igxDrag  (dragMove)="onDragMove()">
<span>Drag Me!</span>
</div>
public onDragMove(){
alert("The element has moved!");
}
次のメンバー:

IgxDragDirective

dragStart: EventEmitter<IDragStartEventArgs> = ...

ドラッグ可能な要素のドラッグが開始するときにトリガーされるイベント。

<div igxDrag (dragStart)="onDragStart()">
<span>Drag Me!</span>
</div>
public onDragStart(){
alert("The drag has stared!");
}
次のメンバー:

IgxDragDirective

dragTolerance: number = 5

ドラッグを開始する時を示す @Input プロパティ。 デフォルトで、ドラッグ可能な要素が 5 px で移動された後にドラッグが開始します。

<div igxDrag [dragTolerance]="100">
<span>Drag Me!</span>
</div>
次のメンバー:

IgxDragDirective

element: ElementRef<any>
ghost: boolean = true

ベース要素を移動しないかどうかまたはそれを表すゴースト要素をレンダリングする必要があるかどうかを指定する @Input プロパティ。 デフォルトの設定は true です。 ドラッグするときに false に設定されている場合、代わりにベース要素が移動され、ゴースト要素はレンダリングされません。

<div igxDrag [ghost]="false">
<span>Drag Me!</span>
</div>
次のメンバー:

IgxDragDirective

ghostClass: string = ''

ghostElement 要素に追加するカスタム クラスを設定します。

<div igxDrag [ghostClass]="'ghostElement'">
<span>Drag Me!</span>
</div>
次のメンバー:

IgxDragDirective

ghostCreate: EventEmitter<IDragGhostBaseEventArgs> = ...

ドラッグ ゴースト要素が作成されたときにトリガーされるイベント。

<div igxDrag (ghostCreate)="ghostCreated()">
<span>Drag Me!</span>
</div>
public ghostCreated(){
alert("The ghost has been created!");
}
次のメンバー:

IgxDragDirective

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs> = ...

ドラッグ ゴースト要素が作成されたときにトリガーされるイベント。

<div igxDrag (ghostDestroy)="ghostDestroyed()">
<span>Drag Me!</span>
</div>
public ghostDestroyed(){
alert("The ghost has been destroyed!");
}
次のメンバー:

IgxDragDirective

ghostHost: any

ドラッグされる要素を追加する要素を設定する @Input プロパティ。 デフォルトで、null 値に設定されて、ドラッグされる要素はボディに追加されます。

<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
<span>Drag Me!</span>
</div>
次のメンバー:

IgxDragDirective

ghostTemplate: TemplateRef<any>

ドラッグが開始され、ghost が true のときに作成されるゴースト要素のテンプレートを指定する @Input プロパティ。 デフォルトでは、igxDrag がインスタンス化されるベース要素のクローンが作成されます。

<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

renderer: Renderer2
transitioned: EventEmitter<IDragBaseEventArgs> = ...

ドラッグ可能な要素が解放され、アニメーションが完了された後にトリガーされるイベント。

<div igxDrag (transitioned)="onMoveEnd()">
<span>Drag Me!</span>
</div>
public onMoveEnd(){
alert("The move has ended!");
}
次のメンバー:

IgxDragDirective

viewContainer: ViewContainerRef
zone: NgZone

アクセサー

  • get data(): any
  • set data(value: any): void
  • get ghostOffsetX(): any
  • set ghostOffsetX(value: any): void
  • ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。

    <div #hostDiv></div>
    <div igxDrag [ghostOffsetX]="0">
    <span>Drag Me!</span>
    </div>
    次のメンバー:

    IgxDragDirective

    返却 any

  • ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。

    <div #hostDiv></div>
    <div igxDrag [ghostOffsetX]="0">
    <span>Drag Me!</span>
    </div>
    次のメンバー:

    IgxDragDirective

    パラメーター

    • value: any

    返却 void

  • get ghostOffsetY(): any
  • set ghostOffsetY(value: any): void
  • ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。

    <div #hostDiv></div>
    <div igxDrag [ghostOffsetY]="0">
    <span>Drag Me!</span>
    </div>
    次のメンバー:

    IgxDragDirective

    返却 any

  • ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。

    <div #hostDiv></div>
    <div igxDrag [ghostOffsetY]="0">
    <span>Drag Me!</span>
    </div>
    次のメンバー:

    IgxDragDirective

    パラメーター

    • value: any

    返却 void

メソッド

  • トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。 Ghost が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。 目的の位置を決定するときは、getBoundingClientRects() + pageScroll を使用することを推奨します。

    パラメーター

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

    返却 void

  • 最初の位置への ghost 入力に基づき、ベースまたはゴースト要素をアニメーション化します。 Ghost が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。 ベース要素の DOM 位置が変更された場合、それに応じて初期の位置が変更されます。

    パラメーター

    • オプション customAnimArgs: IDragCustomTransitionArgs

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

    • オプション startLocation: IgxDragLocation

      Start location from where the transition should start.

    返却 void