クラス IgxDropDirective

階層

  • IgxDropDirective

実装

  • OnInit
  • OnDestroy

コンストラクタ

プロパティ

アクセサー

コンストラクタ

constructor

  • new IgxDropDirective(element: ElementRef, _renderer: Renderer2, _zone: NgZone): IgxDropDirective

プロパティ

data

data: any
  • igxDrop ディレクティブ内にデータを保存します。要素で igxDrop のインスタンスを作成するときに設定できます。
    <div [igxDrop]="{ source: myElement }"></div>
次のメンバー:

IgxDropDirective

dropChannel

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

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

<div igxDrag [dragChannel]="'odd'">
        <span>95</span>
</div>
<div igxDrop [dropChannel]="['odd', 'irrational']">
        <span>Numbers drop area!</span>
</div>
次のメンバー:

IgxDropDirective

dropped

dropped: EventEmitter<IDropDroppedEventArgs> = new EventEmitter<IDropDroppedEventArgs>()

ドラッグされた要素が要素の領域にドロップされるときにトリガーされるイベント。 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!");
}
次のメンバー:

IgxDropDirective

element

element: ElementRef

enter

enter: EventEmitter<IDropBaseEventArgs> = new 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

leave: EventEmitter<IDropBaseEventArgs> = new 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

over: EventEmitter<IDropBaseEventArgs> = new 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

アクセサー

dropStrategy

  • get dropStrategy(): any
  • set dropStrategy(classRef: any): void
  • 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>
      `typescript import { IgxAppendDropStrategy } from 'igniteui-angular';

    export class App { public myDropStrategy = IgxAppendDropStrategy; } `

    返却 any

  • 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>
      `typescript import { IgxAppendDropStrategy } from 'igniteui-angular';

    export class App { public myDropStrategy = IgxAppendDropStrategy; } `

    次のメンバー:

    IgxDropDirective

    パラメーター

    • classRef: any

    返却 void