ドラッグされた要素が要素の領域にドロップされるときにトリガーされるイベント。
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>
igxDrop ディレクティブ内にデータを保存します。要素で igxDrop をインスタンス化する際に設定できます。<div [igxDrop]="{ source: myElement }"></div>
IgxDrag 要素が現在のドロップ領域内で解放されたときに実行されるドロップ ストラテジ タイプを指定する @Input プロパティ。以下はサポートされるストラテジです。
igxDrop の直接の子として最後の位置に追加します。igxDrop の直接の子として最初の位置に追加します。igxDrop の子要素の上のリリースされた位置に挿入されます。
それ以外の場合、igxDrop の子の外部でリリースされた場合、ドロップされた要素が追加されます。<div igxDrag>
<span>DragMe</span>
</div>
<div igxDrop [dropStrategy]="myDropStrategy">
<span>Numbers drop area!</span>
</div>
export class App { public myDropStrategy = IgxAppendDropStrategy; } ```
IgxDrag 要素が現在のドロップ領域内で解放されたときに実行されるドロップ ストラテジ タイプを指定する @Input プロパティ。以下はサポートされるストラテジです。
igxDrop の直接の子として最後の位置に追加します。igxDrop の直接の子として最初の位置に追加します。igxDrop の子要素の上のリリースされた位置に挿入されます。
それ以外の場合、igxDrop の子の外部でリリースされた場合、ドロップされた要素が追加されます。<div igxDrag>
<span>DragMe</span>
</div>
<div igxDrop [dropStrategy]="myDropStrategy">
<span>Numbers drop area!</span>
</div>
export class App { public myDropStrategy = IgxAppendDropStrategy; } ```
igxDrag と igxDrop をチャネルでリンクする方法を提供する @Input プロパティ。 単一の値または値の配列を受け入れ、完全に一致することで評価します。
IgxDropDirective