Class IgxDragDirective

階層

Hierarchy

  • IgxDragDirective

実装

  • AfterContentInit
  • OnDestroy

コンストラクター

プロパティ

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

ghostStyle: {} = {}

ghostElement 要素に追加されるスタイルを設定します。

<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
<span>Drag Me!</span>
</div>

次のメンバー

IgxDragDirective

Type declaration

    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>

    次のメンバー

    IgxDragDirective

    renderer: Renderer2
    scrollContainer: HTMLElement = null

    スクロール コンテナーをドラッグされている要素に割り当てる

    Input

    プロパティです。デフォルトでそのウィンドウです。

    transitioned: EventEmitter<IDragBaseEventArgs> = ...

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

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

    次のメンバー

    IgxDragDirective

    viewContainer: ViewContainerRef
    zone: NgZone

    アクセサー

    メソッド

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

      パラメーター

      • target: ElementRef<any> | IgxDragLocation

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

      • Optional customAnimArgs: IDragCustomTransitionArgs

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

      • Optional startLocation: IgxDragLocation

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

      返却 void

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

      パラメーター

      • Optional customAnimArgs: IDragCustomTransitionArgs

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

      • Optional startLocation: IgxDragLocation

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

      返却 void