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

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

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

<div igxDrag (dragClick)="onDragClick()">
        <span>Drag Me!</span>
</div>
Copy

public onDragClick(){
     alert("The element has been clicked!");
}
Copy

要素をドラッグできる方向を設定します。 デフォルトでは、水平方向と垂直方向の両方に設定されています。

<div igxDrag [dragDirection]="dragDir">
        <span>Drag Me!</span>
</div>
Copy

public dragDir = DragDirection.HORIZONTAL;
Copy

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

<div igxDrag (dragEnd)="onDragEnd()">
        <span>Drag Me!</span>
</div>
Copy

public onDragEnd(){
     alert("The drag has ended!");
}
Copy

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

<div igxDrag  (dragMove)="onDragMove()">
        <span>Drag Me!</span>
</div>
Copy

public onDragMove(){
     alert("The element has moved!");
}
Copy

ドラッグ可能な要素のドラッグが開始するときにトリガーされるイベントです。

<div igxDrag (dragStart)="onDragStart()">
        <span>Drag Me!</span>
</div>
Copy

public onDragStart(){
     alert("The drag has stared!");
}
Copy

ドラッグを開始する前の許容範囲をピクセル単位で設定します。 デフォルトで、ドラッグ可能な要素が 5 px で移動された後にドラッグが開始します。

<div igxDrag [dragTolerance]="100">
        <span>Drag Me!</span>
</div>
Copy

基本要素を移動するか、代わりにそれを表すゴースト要素を描画するかを設定します。 デフォルトの設定は true です。 ドラッグするときに false に設定されている場合、代わりにベース要素が移動され、ゴースト要素はレンダリングされません。

<div igxDrag [ghost]="false">
     <span>Drag Me!</span>
</div>
Copy

ghostElement 要素に追加するカスタム クラスを設定します。

<div igxDrag [ghostClass]="'ghostElement'">
        <span>Drag Me!</span>
</div>
Copy

ドラッグ ゴースト要素が作成されたときにトリガーされるイベントです。

<div igxDrag (ghostCreate)="ghostCreated()">
        <span>Drag Me!</span>
</div>
Copy

public ghostCreated(){
     alert("The ghost has been created!");
}
Copy

ドラッグ ゴースト要素が作成されたときにトリガーされるイベントです。

<div igxDrag (ghostDestroy)="ghostDestroyed()">
        <span>Drag Me!</span>
</div>
Copy

public ghostDestroyed(){
     alert("The ghost has been destroyed!");
}
Copy

ドラッグされた要素が追加される要素を設定します。 デフォルトでは null が設定され、その場合ドラッグされる要素は body 要素に追加されます。

<div #hostDiv></div>
<div igxDrag [ghostHost]="hostDiv">
        <span>Drag Me!</span>
</div>
Copy

ghostElement 要素に追加されるスタイルを設定します。

<div igxDrag [ghostStyle]="{'--ig-size': 'var(--ig-size-small)'}">
        <span>Drag Me!</span>
</div>
Copy

ドラッグが開始され、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>
Copy

ドラッグされた要素のスクロール コンテナーをオーバーライドします。デフォルトでそのウィンドウです。

ドラッグ可能な要素が解放され、アニメーションが完了された後にトリガーされるイベントです。

<div igxDrag (transitioned)="onMoveEnd()">
        <span>Drag Me!</span>
</div>
Copy

public onMoveEnd(){
     alert("The move has ended!");
}
Copy