IgxDragDirective
ドラッグ可能な要素がクリックされたときにトリガーされるイベントです。
<div igxDrag (dragClick)="onDragClick()">
<span>Drag Me!</span>
</div>
public onDragClick(){
alert("The element has been clicked!");
}
IgxDragDirective
要素をドラッグできる方向を設定します。 デフォルトでは、水平方向と垂直方向の両方に設定されています。
<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
ドラッグを開始する前の許容範囲をピクセル単位で設定します。 デフォルトで、ドラッグ可能な要素が 5 px で移動された後にドラッグが開始します。
<div igxDrag [dragTolerance]="100">
<span>Drag Me!</span>
</div>
IgxDragDirective
基本要素を移動するか、代わりにそれを表すゴースト要素を描画するかを設定します。
デフォルトの設定は 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
ドラッグされた要素が追加される要素を設定します。 デフォルトでは null が設定され、その場合ドラッグされる要素は body 要素に追加されます。
<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
<span>Drag Me!</span>
</div>
IgxDragDirective
ghostElement 要素に追加されるスタイルを設定します。
<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
<span>Drag Me!</span>
</div>
IgxDragDirective
ドラッグが開始され、ghost が true のときに作成されるゴースト要素のテンプレートを指定します。
デフォルトでは、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
ドラッグされた要素のスクロール コンテナーをオーバーライドします。デフォルトでそのウィンドウです。
ドラッグ可能な要素が解放され、アニメーションが完了された後にトリガーされるイベントです。
<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
ドラッグされた要素のオフセットをマウスに対してピクセル単位で設定します。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。
<div #hostDiv></div>
<div igxDrag [ghostOffsetX]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
ドラッグされた要素のオフセットをマウスに対してピクセル単位で設定します。 デフォルトでは、ドラッグが開始されたときにマウスとの相対的な位置を取得し、同じ位置に保ちます。
<div #hostDiv></div>
<div igxDrag [ghostOffsetY]="0">
<span>Drag Me!</span>
</div>
IgxDragDirective
ページに相対的な要素の現在の位置を取得します。
ドラッグが開始する前に要素の元の位置を取得します。
ドキュメントに関連してレンダリングされた場合、ベース要素またはゴースト要素の目的の位置を設定します。
適用する新しい位置。getBoundingClientRects() + スクロール を使用して新しい位置を取得することを推奨します。
トランジションを使用して、ベースまたはゴースト要素を特定のターゲット位置または他の要素にアニメーション化します。
ghost が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
目的の位置を決定するときは、getBoundingClientRects() + pageScroll を使用することを推奨します。
ベースまたはゴーストが移行するターゲットです。ページ内の位置または別の HTML 要素のいずれかです。
トランジションを実行するときに適用されるカスタムトランジション プロパティです。
トランジションを開始する開始位置。
最初の位置への ghost 入力に基づき、ベースまたはゴースト要素をアニメーション化します。
ghost が true で、ゴーストがレンダリングされていない場合、作成されてアニメートされます。
ベース要素の DOM 位置が変更された場合、それに応じて初期の位置が変更されます。
トランジションを実行するときに適用されるカスタムトランジション プロパティです。
トランジションを開始する開始位置。
igxDrag と igxDrop をチャネルでリンクする方法を提供するプロパティ。 単一の値または値の配列を受け入れ、完全に一致するかどうかを評価します。