ドラッグ アンド ドロップ

Ignite UI for Angular Drag and Drop ディレクティブは、ページの要素のドラッグを有効にします。

デモ

タイトルをドラッグアンドドロップするパズル


Drag ディレクティブ

Angular アプリケーション内の要素をある場所から他の場所へドラッグするには、igxDrag ディレクティブを使用します。igxDrop ディレクティブと組み合わせてドラッグした要素の配置やインタラクティブなアプリケーションを作成できます。

基本構成

igxDrag ディレクティブは、テンプレートに追加して DOM 要素に適用できます。

<div igxDrag>Drag me</div>

DOM 動作

ユーザーが 5px いずれかの方向へスワイプするとデフォルトでドラッグ操作を開始します。そうでない場合は、インタラクションがクリックとして見なされ、dragClicked イベントが発生します。

ドラッグ時にドラッグ ゴースト要素が発生し、マウスカーソルまたはタッチインタラクションと共に移動します。元の要素は表示されたままですが、hideBaseOnDrag でドラッグ開始時に自動的に非表示にできます。

ドラッグは、dragStart イベントの cancel プロパティを true に設定してキャンセルできます。デフォルトのドラッグ ロジックをキャンセルします。

ユーザーがリリースした後、マウス/タッチ ドラッグ ゴースト要素が DOM から削除され、hideBaseOnDrag が有効な場合、元の要素が再び表示されて dragEnd が発生されます。animateOnRelease 入力を true に設定すると、最後にドラッグした位置から元の要素の位置へ戻すドラッグ ゴーストのデフォルト アニメーションの完了後に実行します。ドラッグ ゴーストは削除され、returnMoveEnd イベントが発生されます。

使用方法

<div igxDrag [hideBaseOnDrag]="true" [animateOnRelease]="true" *ngFor="let elem of draggableElems" >
    <span [style.margin]="'auto'">{{elem.label}}</span>
</div>

Drop ディレクティブ

igxDrag ディレクティブを使用してドラッグされている要素を領域に配置する場合、igxDrop を使用します。要素がドロップ領域に入ったかどうか、その後領域内でリリースされているかを決定するためにユーザーが使用できるイベントを提供します。

基本構成

igxDrop ディレクティブは [igxDrag と同様に DOM 要素に適用できます。

<div igxDrop>Drop here</div>

igxDrop ディレクティブにドロップした igxDrag 要素は、インスタンス化した igxDrop を持つ要素の子として付け加えるロジックがデフォルトで提供されます。igxDrop ディレクティブの onDrop イベントをキャンセルしてオーバーライドできます。onDrop イベントが提供する cancel 引数を設定して行うことができます。

ドロップ ロジックを定義し、igxDraganimateOnRelease 入力を true に設定した場合、DOM 操作完了後に igxDragdropFinished() メソッドも呼び出すことが推奨されます。igxDrag に通知して関連する配置を DOM の新しい位置に更新することにより、正しくアニメーション化します。

onDrop デフォルトのドロップ ロジックをキャンセルの例。

<div igxDrop (onDrop)="onElemDrop($event)">Drop here</div>
public onElemDrop(event: IgxDropEventArgs) {
    event.cancel = true; // This cancels the default drop logic
    // ...
    // Custom implementation logic
    // ...

    // This is required to tell the dragged element the dropping has finished, so it can return to the new location/old location.
    // It can be called anywhere in the code as well.
    event.drag.dropFinished(); 
}

高度な設定

1 つの要素に igxDragigxDrop 両方のディレクティブを使用できます。ただし、他の要素が igxDrop ディレクティブの onDrop イベントをキャンセルしてドロップされているときはカスタム ロジックを使用してください。

使用方法

<div class="dropArea" igxDrop (onEnter)="onAreaEnter()" (onLeave)="onAreaLeave()">
    <span *ngIf="!elementInsideArea">Drag here.</span>
    <span *ngIf="elementInsideArea">Release to put element here.</span>
</div>
//App component...
public onAreaEnter() {
    this.elementInsideArea = true;
    this.changeDetectionRef.detectChanges();
}
public onAreaLeave() {
    this.elementInsideArea = false;
    this.changeDetectionRef.detectChanges();
}
//...

API

リファレンス

コミュニティに参加して新しいアイデアをご提案ください。