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