クラス IgxDragDirective

階層

Hierarchy

  • IgxDragDirective

実装

  • AfterContentInit
  • OnDestroy

コンストラクタ

プロパティ

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

Input

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

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

Memberof

IgxDragDirective

dragClick: EventEmitter<IDragBaseEventArgs> = ...

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

<div igxDrag (dragClick)="onDragClick()">
<span>Drag Me!</span>
</div>
public onDragClick(){
alert("The element has been clicked!");
}

Memberof

IgxDragDirective

dragDirection: DragDirection = DragDirection.BOTH

Input

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

<div igxDrag [dragDirection]="dragDir">
<span>Drag Me!</span>
</div>
public dragDir = DragDirection.HORIZONTAL;

Memberof

IgxDragDirective

dragEnd: EventEmitter<IDragBaseEventArgs> = ...

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

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

Memberof

IgxDragDirective

dragMove: EventEmitter<IDragMoveEventArgs> = ...

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

<div igxDrag  (dragMove)="onDragMove()">
<span>Drag Me!</span>
</div>
public onDragMove(){
alert("The element has moved!");
}

Memberof

IgxDragDirective

dragStart: EventEmitter<IDragStartEventArgs> = ...

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

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

Memberof

IgxDragDirective

dragTolerance: number = 5

Input

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

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

Memberof

IgxDragDirective

element: ElementRef<any>
ghost: boolean = true

Input

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

<div igxDrag [ghost]="false">
<span>Drag Me!</span>
</div>

Memberof

IgxDragDirective

ghostClass: string = ''

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

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

Memberof

IgxDragDirective

ghostCreate: EventEmitter<IDragGhostBaseEventArgs> = ...

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

<div igxDrag (ghostCreate)="ghostCreated()">
<span>Drag Me!</span>
</div>
public ghostCreated(){
alert("The ghost has been created!");
}

Memberof

IgxDragDirective

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs> = ...

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

<div igxDrag (ghostDestroy)="ghostDestroyed()">
<span>Drag Me!</span>
</div>
public ghostDestroyed(){
alert("The ghost has been destroyed!");
}

Memberof

IgxDragDirective

ghostHost: any

Input

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

<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
<span>Drag Me!</span>
</div>

Memberof

IgxDragDirective

ghostTemplate: TemplateRef<any>

Input

ドラッグが開始され、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>

Memberof

IgxDragDirective

renderer: Renderer2
scrollContainer: HTMLElement = null

Input

スクロール コンテナーをドラッグされている要素に割り当てる @Input。デフォルトでそのウィンドウです。

transitioned: EventEmitter<IDragBaseEventArgs> = ...

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

<div igxDrag (transitioned)="onMoveEnd()">
<span>Drag Me!</span>
</div>
public onMoveEnd(){
alert("The move has ended!");
}

Memberof

IgxDragDirective

viewContainer: ViewContainerRef
zone: NgZone

アクセサー

メソッド

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

    パラメーター

    • target: ElementRef<any> | IgxDragLocation

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

    • オプション customAnimArgs: IDragCustomTransitionArgs

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

    • オプション startLocation: IgxDragLocation

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

    返却 void

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

    パラメーター

    • オプション customAnimArgs: IDragCustomTransitionArgs

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

    • オプション startLocation: IgxDragLocation

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

    返却 void