ドラッグされた要素が要素の領域にドロップされるときにトリガーされるイベントです。
igxDrop にはドロップした要素を子として追加するデフォルト
ロジックがあるため、ここでキャンセルできます。デフォルト ロジックをキャンセルするには、イベントの cancel プロパティを true に設定する必要があります。
<div class="cageArea" igxDrop (dropped)="dragDrop()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragDrop(){
alert("A draggable element has been dropped in the chip area!");
}
ドラッグされた要素が要素の領域に入るときにトリガーされるイベントです。
<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
alert("A draggable element has entered the chip area!");
}
ドラッグされた要素が要素の領域から出るときにトリガーされるイベントです。
<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragLeave(){
alert("A draggable element has left the chip area!");
}
ドラッグされた要素が要素の領域に入るときにトリガーされるイベントです。
<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
alert("A draggable element has entered the chip area!");
}
igxDrop ディレクティブ内にデータを保存します。要素で igxDrop インスタンス化するときに設定できます。<div [igxDrop]="{ source: myElement }"></div>
IgxDrag 要素が現在のドロップ領域内で解放されたときに実行されるドロップ ストラテジ タイプを指定します。以下はサポートされるストラテジです。
igxDrop の直接の子として最後の位置に追加します。igxDrop の直接の子として最初の位置に追加します。igxDrop の子要素の上のリリースされた位置に挿入されます。
それ以外の場合、igxDrop の子の外部でリリースされた場合、ドロップされた要素が追加されます。<div igxDrag>
<span>DragMe</span>
</div>
<div igxDrop [dropStrategy]="myDropStrategy">
<span>Numbers drop area!</span>
</div>
import { IgxAppendDropStrategy } from 'igniteui-angular';
export class App {
public myDropStrategy = IgxAppendDropStrategy;
}
igxDrag と igxDrop をチャネルでリンクする方法を提供するプロパティ。 単一の値または値の配列を受け入れ、完全に一致するかどうかを評価します。