クラス IgxDragDirective

階層

  • IgxDragDirective

実装

  • AfterContentInit
  • OnDestroy

コンストラクタ

constructor

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

プロパティ

cdr

cdr: ChangeDetectorRef

data

data: any
  • データを igxDrag ディレクティブに保存します。要素で igxDrag のインスタンスを作成するときに設定できます。
    <div [igxDrag]="{ source: myElement }"></div>
@次のメンバー:

IgxDragDirective

dragChannel

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

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

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

IgxDragDirective

dragClick

dragClick: EventEmitter<IDragBaseEventArgs> = new EventEmitter<IDragBaseEventArgs>()

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

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

IgxDragDirective

dragDirection

dragDirection: DragDirection = DragDirection.BOTH

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

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

IgxDragDirective

dragEnd

dragEnd: EventEmitter<IDragBaseEventArgs> = new EventEmitter<IDragBaseEventArgs>()

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

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

IgxDragDirective

dragMove

dragMove: EventEmitter<IDragMoveEventArgs> = new EventEmitter<IDragMoveEventArgs>()

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

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

IgxDragDirective

dragStart

dragStart: EventEmitter<IDragStartEventArgs> = new EventEmitter<IDragStartEventArgs>()

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

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

IgxDragDirective

dragTolerance

dragTolerance: number = 5

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

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

IgxDragDirective

element

element: ElementRef

ghost

ghost: boolean = true

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

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

IgxDragDirective

ghostClass

ghostClass: string = ""

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

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

IgxDragDirective

ghostCreate

ghostCreate: EventEmitter<IDragGhostBaseEventArgs> = new EventEmitter<IDragGhostBaseEventArgs>()

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

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

IgxDragDirective

ghostDestroy

ghostDestroy: EventEmitter<IDragGhostBaseEventArgs> = new EventEmitter<IDragGhostBaseEventArgs>()

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

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

IgxDragDirective

ghostHost

ghostHost: any

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

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

IgxDragDirective

ghostTemplate

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

renderer: Renderer2

transitioned

transitioned: EventEmitter<IDragBaseEventArgs> = new EventEmitter<IDragBaseEventArgs>()

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

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

IgxDragDirective

viewContainer

viewContainer: ViewContainerRef

zone

zone: NgZone

アクセサー

ghostOffsetX

  • 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

ghostOffsetY

  • 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

location

originLocation

メソッド

setLocation

transitionTo

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

    パラメーター

    • target: IgxDragLocation | ElementRef

      ベースまたはゴーストが移行するターゲット。ページ内の位置または別の HTML 要素のいずれかです。

    • オプション customAnimArgs: IDragCustomTransitionArgs

      トランジションを実行するときに適用されるカスタムトランジション プロパティ。

    • オプション startLocation: IgxDragLocation

      トランジションを開始する開始位置。

    返却 void

transitionToOrigin

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

    パラメーター

    • オプション customAnimArgs: IDragCustomTransitionArgs

      トランジションを実行するときに適用されるカスタムトランジション プロパティ。

    • オプション startLocation: IgxDragLocation

      トランジションを開始する開始位置。

    返却 void