igxDrag ディレクティブに保存します。要素で igxDrag のインスタンスを作成するときに設定できます。<div [igxDrag]="{ source: myElement }"></div>ドラッグ可能な要素がクリックされたときにトリガーされるイベント。
<div igxDrag [animateOnRelease]="'true'" (dragClicked)="dragClicked()">
<span>Drag Me!</span>
</div>public dragClicked(){
alert("The elemented has been clicked!");
}ドラッグ可能な要素が解放されたときにトリガーされるイベント。
<div igxDrag [animateOnRelease]="'true'" (dragEnd)="onDragEnd()">
<span>Drag Me!</span>
</div>public onDragEnd(){
alert("The drag has ended!");
}ドラッグされる要素を追加する要素を設定する @Input プロパティ。 デフォルトで、null 値に設定されて、ドラッグされる要素はボディに追加されます。
<div #hostDiv></div>
<div igxDrag [dragGhostHost]="hostDiv">
<span>Drag Me!</span>
</div>ドラッグ可能な要素のドラッグが開始するときにトリガーされるイベント。
<div igxDrag [animateOnRelease]="'true'" (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>dragGhost 要素に追加するカスタム クラスを設定します。
<div igxDrag [ghostImageClass]="'dragGhost'">
<span>Drag Me!</span>
</div>ドラッグ可能な要素を非表示にする @Input プロパティ。 デフォルトで false に設定されます。
<div igxDrag [dragTolerance]="100" [hideBaseOnDrag]="'true'">
<span>Drag Me!</span>
</div>ドラッグ可能な要素が解放され、アニメーションが完了された後にトリガーされるイベント。
<div igxDrag [animateOnRelease]="'true'" (returnMoveEnd)="onMoveEnd()">
<span>Drag Me!</span>
</div>public onMoveEnd(){
alert("The move has ended!");
}ブラウザーがポインター イベントをサポートするかどうかを返します。
@ViewChild("myDrag" ,{read: IgxDragDirective})
public myDrag: IgxDragDirective;
ngAfterViewInit(){
let pointerEvents = this.myDrag.pointerEventsEnabled;
}ブラウザーがタッチ イベントをサポートするかどうかを返します。
@ViewChild("myDrag" ,{read: IgxDragDirective})
public myDrag: IgxDragDirective;
ngAfterViewInit(){
let touchEvents = this.myDrag.pointerEventsEnabled;
}ドラッグ可能な要素の表示状態を返します。
@ViewChild("myDrag" ,{read: IgxDragDirective})
public myDrag: IgxDragDirective;
ngAfterViewInit(){
let dragVisibilty = this.myDrag.visible;
}ドラッグ可能な要素の表示状態を設定します。
@ViewChild("myDrag" ,{read: IgxDragDirective})
public myDrag: IgxDragDirective;
ngAfterViewInit(){
this.myDrag.visible = false;
}ドロップ/リリースしている igxDrag ディレクティブに通知します。 通常 animateOnRelease を true に設定したときに呼び出されます。 カスタム ドロップ ロジックをキャンセルまたは定義する場合、igxDrag の位置を更新して新しい位置に正しくアニメーションします。
public onDropElem(event) {
// Function bound to the igxDrop directive event `onDrop`
// This cancels the default drop logic of the `igxDrop`
event.cancel = true;
event.drag.dropFinished();
}
要素が解放されたときにドラッグ可能な要素のアニメーションを有効/無効にする @Input プロパティ。
デフォルトで false に設定されます。
<div igxDrag [animateOnRelease]="'true'"> <span>Drag Me!</span> </div>