ラッグ可能な要素がクリックされたときにトリガーされるイベント。
<div igxDrag (dragClick)="onDragClick()">
<span>Drag Me!</span>
</div>
public onDragClick(){
alert("The element has been clicked!");
}
IgxDragDirective
要素をドラッグできる方向を示す @Input プロパティ。 デフォルトでは、水平方向と垂直方向の両方に設定されています。
<div igxDrag [dragDirection]="dragDir">
<span>Drag Me!</span>
</div>
public dragDir = DragDirection.HORIZONTAL;
IgxDragDirective
ドラッグ可能な要素が解放されたときにトリガーされるイベント。
<div igxDrag (dragEnd)="onDragEnd()">
<span>Drag Me!</span>
</div>
public onDragEnd(){
alert("The drag has ended!");
}
IgxDragDirective
ドラッグ可能な要素が移動されたときにトリガーされるイベント。
<div igxDrag (dragMove)="onDragMove()">
<span>Drag Me!</span>
</div>
public onDragMove(){
alert("The element has moved!");
}
IgxDragDirective
ドラッグ可能な要素のドラッグが開始するときにトリガーされるイベント。
<div igxDrag (dragStart)="onDragStart()">
<span>Drag Me!</span>
</div>
public onDragStart(){
alert("The drag has stared!");
}
IgxDragDirective
ドラッグを開始する時を示す @Input プロパティ。 デフォルトで、ドラッグ可能な要素が 5 px で移動された後にドラッグが開始します。
<div igxDrag [dragTolerance]="100">
<span>Drag Me!</span>
</div>
IgxDragDirective
ベース要素を移動しないかどうかまたはそれを表すゴースト要素をレンダリングする必要があるかどうかを指定する @Input プロパティ。
デフォルトの設定は true
です。
ドラッグするときに false
に設定されている場合、代わりにベース要素が移動され、ゴースト要素はレンダリングされません。
<div igxDrag [ghost]="false">
<span>Drag Me!</span>
</div>
IgxDragDirective
ghostElement
要素に追加するカスタム クラスを設定します。
<div igxDrag [ghostClass]="'ghostElement'">
<span>Drag Me!</span>
</div>
IgxDragDirective
ドラッグ ゴースト要素が作成されたときにトリガーされるイベント。
<div igxDrag (ghostCreate)="ghostCreated()">
<span>Drag Me!</span>
</div>
public ghostCreated(){
alert("The ghost has been created!");
}
IgxDragDirective
ドラッグ ゴースト要素が作成されたときにトリガーされるイベント。
<div igxDrag (ghostDestroy)="ghostDestroyed()">
<span>Drag Me!</span>
</div>
public ghostDestroyed(){
alert("The ghost has been destroyed!");
}
IgxDragDirective
ドラッグされる要素を追加する要素を設定する @Input プロパティ。 デフォルトで、null 値に設定されて、ドラッグされる要素はボディに追加されます。
<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
<span>Drag Me!</span>
</div>
IgxDragDirective
ドラッグが開始され、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
スクロール コンテナーをドラッグされている要素に割り当てる @Input。デフォルトでそのウィンドウです。
ドラッグ可能な要素が解放され、アニメーションが完了された後にトリガーされるイベント。
<div igxDrag (transitioned)="onMoveEnd()">
<span>Drag Me!</span>
</div>
public onMoveEnd(){
alert("The move has ended!");
}
IgxDragDirective
igxDrag
ディレクティブ内にデータを保存します。要素で igxDrag
インスタンス化するときに設定できます。
<div [igxDrag]="{ source: myElement }"></div>
IgxDragDirective
ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。
<div #hostDiv></div>
<div igxDrag [ghostOffsetX]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
ドラッグされた要素 (マウスに相対) のオフセットをピクセル単位で指定する @Input プロパティ。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。
<div #hostDiv></div>
<div igxDrag [ghostOffsetY]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
ページに相対的な要素の現在の位置を取得します。
ドラッグが開始する前に要素の元の位置を取得します。
適用する新しい位置。getBoundingClientRects() + Scroll を使用して新しい位置を取得することを推奨します。
適用する新しい位置。getBoundingClientRects() + Scroll を使用して新しい位置を取得することを推奨します。
トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
目的の位置を決定するときは、getBoundingClientRects() + pageScroll
を使用することを推奨します。
トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
目的の位置を決定するときは、getBoundingClientRects() + pageScroll
を使用することを推奨します。
トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
目的の位置を決定するときは、getBoundingClientRects() + pageScroll
を使用することを推奨します。
トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
目的の位置を決定するときは、getBoundingClientRects() + pageScroll
を使用することを推奨します。
A最初の位置への ghost
入力に基づき、ベースまたはゴースト要素をアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
ベース要素の DOM 位置が変更された場合、それに応じて初期の位置が変更されます。
A最初の位置への ghost
入力に基づき、ベースまたはゴースト要素をアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
ベース要素の DOM 位置が変更された場合、それに応じて初期の位置が変更されます。
A最初の位置への ghost
入力に基づき、ベースまたはゴースト要素をアニメーション化します。
ghost
が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
ベース要素の DOM 位置が変更された場合、それに応じて初期の位置が変更されます。
Input
igxDrag と igxDrop をチャネルでリンクする方法を提供する @Input プロパティ。 単一の値または値の配列を受け入れ、完全に一致することで評価します。
Memberof
IgxDragDirective