igxDrag と igxDrop をチャネルでリンクする方法を提供する @Input プロパティ。 単一の値または値の配列を受け入れ、完全に一致することで評価します。

<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>

ドラッグ可能な要素がクリックされたときにトリガーされるイベント。

<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!");
}