Class IgxDropDirective

実装

  • OnInit
  • OnDestroy

コンストラクター

プロパティ

アクセサー

コンストラクター

プロパティ

dropChannel: string | number | string[] | number[]

igxDrag と igxDrop をチャネルでリンクする方法を提供する

Input

プロパティです。 単一の値または値の配列を受け入れ、完全に一致することで評価します。

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

次のメンバー

IgxDropDirective

dropped: EventEmitter<IDropDroppedEventArgs> = ...

ドラッグされた要素が要素の領域にドロップされるときにトリガーされるイベントです。 igxDrop hにはドロップした要素を子として追加するデフォルト ロジックがあるため、ここでキャンセルできます。デフォルト ロジックをキャンセルするには、イベントの 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!");
}

次のメンバー

IgxDropDirective

element: ElementRef<any>
enter: EventEmitter<IDropBaseEventArgs> = ...

ドラッグされた要素が要素の領域に入るときにトリガーされるイベントです。

<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
alert("A draggable element has entered the chip area!");
}

次のメンバー

IgxDropDirective

leave: EventEmitter<IDropBaseEventArgs> = ...

ドラッグされた要素が要素の領域から出るときにトリガーされるイベントです。

<div class="cageArea" igxDrop (leave)="dragLeave()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragLeave(){
alert("A draggable element has left the chip area!");
}

次のメンバー

IgxDropDirective

over: EventEmitter<IDropBaseEventArgs> = ...

ドラッグされた要素が要素の領域に入るときにトリガーされるイベントです。

<div class="cageArea" igxDrop (enter)="dragEnter()" (igxDragEnter)="onDragCageEnter()" (igxDragLeave)="onDragCageLeave()">
</div>
public dragEnter(){
alert("A draggable element has entered the chip area!");
}

次のメンバー

IgxDropDirective

アクセサー

  • get dropStrategy(): any
  • 返却 any

  • set dropStrategy(classRef): void
  • 双方向データ バインディング:

    Input

    IgxDrag 要素が現在のドロップ領域内で解放されたときに実行されるドロップ ストラテジ タイプを指定する @Input プロパティです。以下はサポートされるストラテジです。

    • IgxDefaultDropStrategy - デフォルトの基本ストラテジで、処理を実行しません。
    • IgxAppendDropStrategy - ドロップされた要素を igxDrop の直接の子として最後の位置に追加します。
    • IgxPrependDropStrategy - ドロップされた要素を igxDrop の直接の子として最初の位置に追加します。
    • IgxInsertDropStrategy - ドロップされた要素が 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;
    }

    次のメンバー

    IgxDropDirective

    パラメーター

    • classRef: any

    返却 void