クラス IgxColumnMovingDropDirective

階層

実装

  • OnInit
  • OnDestroy
  • OnDestroy

コンストラクタ

constructor

  • new IgxColumnMovingDropDirective(elementRef: ElementRef, renderer: Renderer2, zone: NgZone, cms: IgxColumnMovingService): IgxColumnMovingDropDirective

プロパティ

dropChannel

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

グリッドを返します。 単一の値または値の配列を受け入れ、完全に一致することで評価します。

<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

アクセサー

column

data

  • set data(val: any): void

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; } ```

    @次のメンバー:

    IgxDropDirective

    返却 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

horizontalScroll

  • get horizontalScroll(): any

isDropTarget

  • get isDropTarget(): boolean

メソッド

ngOnDestroy

  • ngOnDestroy(): void

onDragDrop

  • onDragDrop(event: any): void

onDragEnter

  • onDragEnter(event: any): void

onDragLeave

  • onDragLeave(event: any): void

onDragOver

  • onDragOver(event: any): void